用css3淡出背景图片 [英] fade background images with 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-重复; 
} 
  

如果我将背景更改为黄色和悬停，黑色工作正常....但不是我的图像？

解决方案

我无法想象图片在1.5秒内会如何变化。

i会这样做位不同：

http://jsfiddle.net/seler/48BM4/1/ 或 http://jsfiddle.net/seler/48BM4/2/

与图片一样工作：
http://jsfiddle.net/seler/48BM4/3/

另一个示例iwth auto height，无需重复内容：

http://jsfiddle.net/seler/48BM4/7/ p>

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?

解决方案

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/

这篇关于用css3淡出背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！