用css如何实现背景图片的自动替换
首先 写多个背景的class
比如
.imgA {background: url(demo1.jpg) no-repeat;}
.imgB {background: url(demo2.jpg) no-repeat;}
....
然后在需要切换背景的层上用js替换class就行
怎样设置在网页中背景图片的自动更换?
方法一：在html文件中设置
html的中有两个关于背景的属性，其中的background用来设置背景图片。示例如下：
如果背景图片小于网页显示窗口，那么这个背景图片会自动重复。
为保证浏览器载入网页的速度，建议尽量不要使用字节过大的图片作为背景图片。
可以参考这个网站的教程和示例：
方法二：在css文件中设置
css的背景图片属性
示例：
可以参考这个网站的教程和示例：
参考资料：
用css如何实现背景图片的自动替换？
哈哈，这几楼的回答都不太正确，css可以自己完成图片的自动切换，不需要什么js辅助。人家楼主问的如何用css来实现，你搞的那个什么用js来实现，答非所问，还弄个专业回答，逗子终结者？
css有个执行简单动画的写法，比如animation。
我给你个例子：
#head-pic,#head-pic2{
width:145px;height:145px;position:absolute;
top:200px;
left:68px;
z-index:2;
border-radius:100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border:3px solid #fff;
}
/*为浏览器兼容设置*/
@keyframes headpic-slider{
from{background:url(../images/head-pic.jpg);opacity:1.0;}
to{background:url(../images/head-pic.jpg);opacity:0;}
}
@keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg);opacity:0;}
to{background:url(../images/head-pic2.jpg);opacity:1.0;}
}
@-moz-keyframes headpic-slider{
from{background:url(../images/head-pic.jpg);opacity:1.0;}
to{background:url(../images/head-pic.jpg);opacity:0;}
}
@-moz-keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg);opacity:0;}
to{background:url(../images/head-pic.jpg);opacity:1.0;}
}
@-webkit-keyframes headpic-slider{
from{background:url(../images/head-pic.jpg);opacity:1.0;}
to{background:url(../images/head-pic.jpg);opacity:0;}
}
@-webkit-keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg);opacity:0;}
to{background:url(../images/head-pic2.jpg);opacity:1.0;}
}
@-o-keyframes headpic-slider{
from{background:url(../images/head-pic.jpg);opacity:1.0;}
to{background:url(../images/head-pic.jpg);opacity:0;}
}
@-o-keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg);opacity:0;}
to{background:url(../images/head-pic2.jpg);opacity:1.0;}
}
#head-pic{
animation:headpic-slider 20s linear infinite;
-moz-animation:headpic-slider 20s linear infinite;
-webkit-animation:headpic-slider 20s linear infinite;
}
#head-pic2{
animation:headpic-slider2 20s linear infinite;
-moz-animation:headpic-slider2 20s linear infinite;
-webkit-animation:headpic-slider2 20s linear infinite;
}
css背景图片每3秒自动切换
div class="change"
/div
style
.change {
animation: change 9s steps(1) infinite;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
width: 200px;
height: 100px;
}
@keyframes change {
0% {
background-image: url();
}
33% {
background-image: url();
}
66% {
background-image: url()
}
}
/style
纯 css 每3秒播一张图片。9s是总共时间，如果是4张图片这里写 12s