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

Question

晚上，伙计们，我已经使用背景图像了好几次，我发现了一些我想尝试的东西，我们如何在CSS中使用背景重复来制作随机位置图像，我的意思是我可以使重复图像就很好了，而且非常容易但是当我想随机重复我的图像时，我还不太想办法。 所以这是我的问题：

1. 首先，我们真的可以使图像随机地重复吗？ 不会用多张图片或其他任何内容更改图片，而只是在不同位置随机重复一张图片

2. 第二，如何使用CSS做到这一点？

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

随机CSS背景图片

CSS：随机分布的背景图片？

如果您感到困惑，例如，我想使云只随机出现，只有1张图像，如下所示：（请看一下小云）

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

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

Answer 1

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

方法1：

1. 根据您的选择设置背景颜色
2. 为html写一些图像或图标（看起来不错）。
3. 使用CSS使它们的位置相对或绝对（基于这些图标将要使用的其他内容）。 怎么做？
4. 使用相对和绝对定位的top, bottom, left, right属性将它们定位在网页中您需要的任何位置。
5. 如果需要在后台拍摄所有这些图像或图标，请使用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> 

方法二

1. 使用Adobe XD或gravit Designer等工具设计背景图像，然后直接在网页中使用它。