CSS 背景图片转换失败 url
CSS transition fails for background-image url
在 Fade Effect on Link Hover?
上找到以下示例
我做了这个:http://jsfiddle.net/felipelalli/ns9d1vug/
<div class="fade"/>
.fade {
-o-transition: 0.3s;
-moz-transition: 0.3s;
-khtml-transition: 0.3s;
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
width:128px;height:128px;
background:url('http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png')
}
.fade:hover {
color: #b50000;
width:128px;height:128px;
background:url('http://upload.wikimedia.org/wikipedia/commons/b/b2/Crystal_128_babelfish.png')
}
为什么它在 Chrome 但在 Firefox 中运行良好?
您应该使用两个不同的元素,并在它们之间淡入淡出,而不是为一个元素更改背景图像。
这家伙举了一个例子:
http://css3.bradshawenterprises.com/cfimg/
我不认为你应该能够做到这一点,但显然 Chrome 只是对你很好......:-)
它在 FF 中不起作用,因为 Firefox 不支持转换背景图像,仅支持背景颜色。
如果要转换背景图像,请使用两个单独的 <div>
:
.fade div {
-o-transition: 0.3s;
-moz-transition: 0.3s;
-khtml-transition: 0.3s;
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
width:128px;
height:128px;
position:absolute;
top:0;
left:0;
}
.fade{
position:relative;
width:128px;
height:128px;
}
.backone{
z-index:1;
background:url('http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png');
}
.backtwo{
background:url('http://upload.wikimedia.org/wikipedia/commons/b/b2/Crystal_128_babelfish.png');
opacity:0;
z-index:5;
}
.fade:hover .backtwo{
opacity:1;
}
.fade:hover .backone{
opacity:0;
}
<div class="fade">
<div class="backone"></div>
<div class="backtwo"></div>
</div>
在 Fade Effect on Link Hover?
上找到以下示例我做了这个:http://jsfiddle.net/felipelalli/ns9d1vug/
<div class="fade"/>
.fade {
-o-transition: 0.3s;
-moz-transition: 0.3s;
-khtml-transition: 0.3s;
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
width:128px;height:128px;
background:url('http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png')
}
.fade:hover {
color: #b50000;
width:128px;height:128px;
background:url('http://upload.wikimedia.org/wikipedia/commons/b/b2/Crystal_128_babelfish.png')
}
为什么它在 Chrome 但在 Firefox 中运行良好?
您应该使用两个不同的元素,并在它们之间淡入淡出,而不是为一个元素更改背景图像。
这家伙举了一个例子: http://css3.bradshawenterprises.com/cfimg/
我不认为你应该能够做到这一点,但显然 Chrome 只是对你很好......:-)
它在 FF 中不起作用,因为 Firefox 不支持转换背景图像,仅支持背景颜色。
如果要转换背景图像,请使用两个单独的 <div>
:
.fade div {
-o-transition: 0.3s;
-moz-transition: 0.3s;
-khtml-transition: 0.3s;
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
width:128px;
height:128px;
position:absolute;
top:0;
left:0;
}
.fade{
position:relative;
width:128px;
height:128px;
}
.backone{
z-index:1;
background:url('http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png');
}
.backtwo{
background:url('http://upload.wikimedia.org/wikipedia/commons/b/b2/Crystal_128_babelfish.png');
opacity:0;
z-index:5;
}
.fade:hover .backtwo{
opacity:1;
}
.fade:hover .backone{
opacity:0;
}
<div class="fade">
<div class="backone"></div>
<div class="backtwo"></div>
</div>