html 多个背景切换·
时间: 2023-07-19 21:43:39 浏览: 144
你可以使用CSS中的background-image属性来实现多个背景切换。具体方法如下:
1. 将需要切换的背景图片存储在一个数组中。
2. 使用JavaScript来监听用户的行为,例如点击按钮,然后在数组中循环获取下一个背景图片的URL。
3. 将获取到的背景图片URL设置为页面中的背景图片。
下面是一个简单的示例代码:
HTML代码:
```
<body>
<button id="change-bg-btn">Change Background</button>
</body>
```
CSS代码:
```
body {
background-image: url("bg1.jpg");
background-size: cover;
background-position: center;
}
```
JavaScript代码:
```
var bgImages = ["bg1.jpg", "bg2.jpg", "bg3.jpg"];
var currentBgIndex = 0;
var changeBgBtn = document.getElementById("change-bg-btn");
changeBgBtn.addEventListener("click", function() {
currentBgIndex++;
if (currentBgIndex >= bgImages.length) {
currentBgIndex = 0;
}
document.body.style.backgroundImage = "url('" + bgImages[currentBgIndex] + "')";
});
```
这样,当用户点击按钮时,就可以循环切换背景图片了。