css样式的背景图在几个图片中随机获取一个
时间: 2024-03-19 08:44:59 浏览: 148
您可以使用CSS的伪类`:nth-of-type()`和`:nth-child()`来实现从几个背景图中随机获取一个。例如,如果您有三张背景图片,您可以使用以下CSS代码:
```
div {
background-image: url(bg1.jpg);
}
div:nth-of-type(2) {
background-image: url(bg2.jpg);
}
div:nth-of-type(3) {
background-image: url(bg3.jpg);
}
```
然后,您可以使用JavaScript生成一个随机数来决定哪个div应该使用哪个背景图。例如,以下代码将生成一个随机数,并将其应用于div的类名:
```
var randomNum = Math.floor(Math.random() * 3) + 1;
document.querySelector('div:nth-of-type(' + randomNum + ')').classList.add('random-bg');
```
然后,您可以使用CSS来定义`.random-bg`类的背景图:
```
.random-bg {
background-image: url(bg1.jpg);
}
```
这样,您就可以从几个背景图中随机获取一个,并将其应用于特定的元素。
阅读全文