使用 css3 淡入淡出背景图像
嘿大家... 我想知道为什么这不起作用？
.right-article.boy {
background: transparent url(../images/boxes-bg/boy.jpg) left top no-repeat;
width: 413px;
height: 242px;
-webkit-transition: background 1.5s linear;
-moz-transition: background 1.5s linear;
transition: background 1.5s linear;
}
.right-article.boy:hover {
background: transparent url(../images/boxes-bg/boy-hover.jpg) left top no-repeat;
}
如果我将背景更改为黄色等颜色，将悬停更改为黑色，则效果很好......但不适用于我的图像？
Hey everyone...
Im wondering why this wont work?
.right-article.boy {
background: transparent url(../images/boxes-bg/boy.jpg) left top no-repeat;
width: 413px;
height: 242px;
-webkit-transition: background 1.5s linear;
-moz-transition: background 1.5s linear;
transition: background 1.5s linear;
}
.right-article.boy:hover {
background: transparent url(../images/boxes-bg/boy-hover.jpg) left top no-repeat;
}
If i change the background to colors like yellow and the hover, black, it works fine.... But not with my images?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
看看 http://css3.bradshawenterprises.com/cfimg/ – 我写了这个教程帮助有此类问题的人！
Have a look at http://css3.bradshawenterprises.com/cfimg/ – I wrote this tutorial to help people with issues like this!
我无法想象图像在 1.5 秒内会发生怎样的变化。
我会做得有点不同：
http://jsfiddle.net/seler/48BM4/1/ 或 http://jsfiddle.net/seler/48BM4/2/
与图像它会像这样工作：
http://jsfiddle.net/seler/48BM4/3/
另一个带有自动高度和无需重复内容：
http://jsfiddle.net/seler/48BM4/7/
i can't imagine how image would change during 1.5s.
i would do this a little bit different:
http://jsfiddle.net/seler/48BM4/1/ or http://jsfiddle.net/seler/48BM4/2/
with images it would work like that:
http://jsfiddle.net/seler/48BM4/3/
another example iwth auto height and no need to duplicate content:
http://jsfiddle.net/seler/48BM4/7/