css background-image背景图片轮播

1、CSS背景样式有以下几种：

• 背景颜色（background-color）：设置元素的背景颜色。
• 背景图片（background-image）：设置元素的背景图片。
• 背景重复（background-repeat）：设置背景图片是否重复，并指定重复的方式。
• 背景位置（background-position）：设置背景图片在元素中的位置。
• 背景大小（background-size）：设置背景图片的大小。
• 背景固定（background-attachment）：设置背景图片是否固定，即背景图片是否随滚动条滚动。
• 背景填充（background-clip）：设置元素背景的填充区域。
• 渐变背景（background-gradient）：使用渐变色值创建背景。
• 多重背景（multiple backgrounds）：设置多个背景图片和背景颜色。
• 边框图片（border-image）：使用图片来定义元素的边框样式。
• 边框圆角（border-radius）：设置元素的边框圆角效果。
• 盒子阴影（box-shadow）：为元素添加阴影效果。

以上是CSS中常用的背景样式，可以根据需要进行组合使用。

2、通过background-image让背景图片轮播显示

• CSS 样式

@keyframes slideShow {0% {background-image: url('image1.jpg');}25% {background-image: url('image2.jpg');}50% {background-image: url('image3.jpg');}75% {background-image: url('image4.jpg');}100% {background-image: url('image1.jpg');}
}.background-slider {animation: slideShow 10s infinite;background-size: cover;background-position: center;transition: background-image 0s; /* 防止背景变化时的过渡效果 */
}

• HTML部分

<div class="background-slider"></div>

        这段代码将创建一个无缝轮播背景图片的动画，每张图片都是在不同的时间点显示，并且使用transition属性避免了背景变化时的默认过渡效果，从而减少了闪烁。