css三张背景图片自动变换

在CSS中，我们经常会使用背景图片来装饰网页。如果想让背景图片自动变换，可以使用CSS3中新增的多背景属性background-image，为元素设置多张背景图片，并利用CSS3动画来实现图片的自动切换。

/* 为元素设置多张背景图片 */
.bg {
  background-image: url(img1.jpg), url(img2.jpg), url(img3.jpg);
  background-position: 0 0, 0 0, 0 0; /* 设置多张图片的定位 */
  background-size: auto, auto, auto; /* 设置图片大小 */
  animation: bg-animation 10s ease-in-out infinite; /* 设置CSS3动画 */
}

/* CSS3动画 */
@keyframes bg-animation {
  0% {background-image: url(img1.jpg), url(img2.jpg), url(img3.jpg);}
  33% {background-image: url(img2.jpg), url(img3.jpg), url(img1.jpg);}
  66% {background-image: url(img3.jpg), url(img1.jpg), url(img2.jpg);}
  100% {background-image: url(img1.jpg), url(img2.jpg), url(img3.jpg);}
} 

上述代码中，我们为元素.bg设置了三张背景图片，并设置了每张图片的定位和大小，然后利用CSS3动画来实现图片的自动切换。在CSS3动画中，我们通过@keyframes关键字定义了一个名为bg-animation的动画，该动画从0%到100%分别对应图片的三个状态，通过background-image属性来切换图片。