用css如何实现背景图片的自动替换?

html-css024

用css如何实现背景图片的自动替换?,第1张

哈哈,这几楼的回答都不太正确,css可以自己完成图片的自动切换,不需要什么js辅助。人家楼主问的如何用css来实现,你搞的那个什么用js来实现,答非所问,还弄个专业回答,逗子终结者?

css有个执行简单动画的写法,比如animation。

我给你个例子:

#head-pic,#head-pic2{

width:145pxheight:145pxposition: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

}

不兼容原因,a标签属于内联标记,不应该给他直接设置padding应该避免的是,元素需要定义高度和宽度的时候尽量避免设置padding属性而用margin属性代替。解决方案,A标签必须属性是行元素display:blockA标签如果有宽度高度属性,那么就不能有padding属性,(IEFF解释不一样所以不能使用。)A标签如果没有宽度高度属性可以使用padding,那么他外层就必须有元素有对应属性固定A标签的宽度和高度。解决代码一。css修改:a{font-size:14pxcolor:#006699}修改为a{font-size:14pxcolor:#006699display:blockpadding:5px}新添加一个ID#all{width:145pxheight:122px}标签修改修改为此方式使用padding,所以A标签不能有高度和宽度属性,从新定义一个DIV封套住A标签,DIV标签设置宽度高度宽度属性。(值=实际尺寸+padding尺寸)解决代码二,css修改:a{font-size:14pxcolor:#006699}修改为a{font-size:14pxcolor:#006699display:blockpadding:5pxwidth:145pxheight:122px}标签修改修改为此方法给A定义宽度高度,所以能使用padding而用A内部的img标签定义margin分开空隙。