当前位置：首页 > article >正文

css background-image背景图片轮播

article 2024/11/8 12:45:26

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; /* 防止背景变化时的过渡效果 */
}