Question

晚上，我已经多次使用 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 重复它，我会发现它不好

Answer 1

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

方法1：

根据您的选择设置背景颜色
写一些图像或图标的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>

方法2

使用Adobe XD或gravit Designer等工具设计背景图片，然后直接在您的网页中使用。

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

1 个答案: