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
属性避免了背景变化时的默认过渡效果,从而减少了闪烁。