如何使背景图像以随机位置重复答案

【问题标题】：how to make background-image repeated with random position如何使背景图像以随机位置重复
【发布时间】：2018-11-15 03:30:23
【问题描述】：

晚上，伙计们，我已经多次使用 background-image 并且我找到了我想尝试的东西，我们如何在 CSS 中使用 background-repeat 制作随机位置图像，我的意思是我可以使重复的图像很好，而且很容易，但是当我想让我的图像随机重复时，我还没有找到方法。所以这是我的问题：

首先，我们真的可以让我们的图像随机重复吗？不使用多个图像或任何内容更改图像，而只是随机更改在不同位置重复 1 张图片
其次，我们如何使用 CSS 来做到这一点？

作为参考，我已经尝试了几种解决方案，但仍然无法解决：

Random CSS background image

CSS: Randomly distributed background image?

如果您感到困惑，例如我想让一朵云随机出现，只有一张这样的图像：（请看小云）

https://drive.google.com/file/d/1ubOBFNLpDLHpyoZKEpv4KKzeINpqzshi/view?usp=sharing

我们真的可以做到吗？因为如果我们只使用 background-repeat 重复它，我发现它不好

【问题讨论】：

标签： html css

【解决方案1】：

我可以说有两种方法可以做到这一点，但在这里你不会使用background-repeat 属性。下面的解释是考虑问题中提到的云示例。

方法一：

根据您的选择设置背景颜色
为少数图片或图标编写 html（以看起来不错的为准）。
使用 CSS 使它们的位置相对或绝对（基于您要与这些图标一起使用的其他内容）。 How to do it?
使用 top, bottom, left, right 的相对和绝对定位属性将这些定位在您的网页中您需要的任何位置。
如果需要在后台获取所有这些图像或图标，请使用z-index 属性。

检查这个例子。

.one{
    position: relative;
    left: 30px;
    top:50px;
    border: 3px solid #73AD21;
}
.two{
position: relative;
    left: 100px;
    top:200px;
    border: 3px solid #73AD21;
}
.three{
position: relative;
    left: 300px;
    top:100px;
    border: 3px solid #73AD21;
}
.four{
position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}

<head><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

</head>
<body>
<i class="fa fa-home one"></i>
<i class="fa fa-home two"></i>
<i class="fa fa-home three"></i>
<i class="fa fa-home four"></i>

<body>

方法二

使用 adobe XD 或 gravit Designer 等工具设计背景图片并直接在网页中使用。

【讨论】：