如何使背景圖像以隨機位置重復

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等工具設計背景圖像，然后直接在網頁中使用它。