用css如何实现背景图片的自动替换?
发布网友
发布时间：2022-04-24 00:37
共2个回答
热心网友
时间：2022-04-20 19:49
哈哈，这几楼的回答都不太正确，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;
}
热心网友
时间：2022-04-20 21:07
首先 写多个背景的class
比如
.imgA {background: url(demo1.jpg) no-repeat;}
.imgB {background: url(demo2.jpg) no-repeat;}
....
然后在需要切换背景的层上用js替换class就行
