html background多图轮换

要实现多图轮换的背景效果，可以使用CSS3的animation属性结合background-image属性来实现。具体步骤如下：

1. 在HTML中创建一个空的div元素，用于显示背景图片。

2. 使用CSS设置该div元素的宽度和高度，并将其position属性设置为fixed，使其固定在页面的底部。

3. 使用CSS设置该div元素的background-image属性为第一张背景图片，并将其background-size属性设置为cover，以便使背景图片自适应div元素的大小。

4. 使用CSS3的animation属性创建一个动画效果，使背景图片在一定时间内完成轮换。具体做法是设置animation属性的duration属性为轮换的时间，将animation-timing-function属性设置为linear，将animation-iteration-count属性设置为infinite，以便使动画效果一直循环播放。

5. 使用CSS3的@keyframes规则来定义动画效果。具体做法是在@keyframes规则中设置每个背景图片的显示时间和切换时间，以及每个背景图片的显示位置和透明度。

6. 使用JavaScript代码来动态地切换背景图片。具体做法是创建一个数组，将所有的背景图片路径存储在数组中，然后使用setInterval函数来定时切换背景图片。

下面是示例代码：

HTML代码：

<div class="bg"></div>

CSS代码：

.bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url("path/to/first/image.jpg");
    background-size: cover;
    animation: bg-animation 10s linear infinite;
}

@keyframes bg-animation {
    0% {
        background-image: url("path/to/first/image.jpg");
    }
    25% {
        background-image: url("path/to/second/image.jpg");
    }
    50% {
        background-image: url("path/to/third/image.jpg");
    }
    75% {
        background-image: url("path/to/fourth/image.jpg");
    }
    100% {
        background-image: url("path/to/fifth/image.jpg");
    }
}

JavaScript代码：

var images = [
    "path/to/first/image.jpg",
    "path/to/second/image.jpg",
    "path/to/third/image.jpg",
    "path/to/fourth/image.jpg",
    "path/to/fifth/image.jpg"
];

var index = 0;

setInterval(function() {
    index = (index + 1) % images.length;
    document.querySelector(".bg").style.backgroundImage = "url(" + images[index] + ")";
}, 10000);

注意：需要将示例代码中的路径替换为实际图片的路径。