CSS3背景图片过渡

我正在尝试使用CSS转换来实现“淡入淡出”效果。 但我不能得到这个与背景图像工作…

CSS：

.title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; } .title a:hover { background: transparent; background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; }​ 

看看： http : //jsfiddle.net/AK3La/

Answer 1

您可以转换background-image 。 在img元素上使用下面的CSS：

 -webkit-transition: background-image 0.2s ease-in-out; transition: background-image 0.2s ease-in-out; 

这由Chrome，Opera和Safari本地支持。 Firefox还没有实现它（ bugzil.la ）。 不知道有关IE。

Answer 2

解决方案（我自己发现的）是一个忍者技巧，我可以给你两种方法：

首先你需要为<img>制作一个“容器”，它将同时包含常规和悬停状态：

 <div class="images-container"> <img src="http://lorempixel.com/400/200/animals/9/"> <img src="http://lorempixel.com/400/200/animals/10/"> </div> 

• 与CSS3选择器http://jsfiddle.net/eD2zL/1/ （如果你使用这个，“正常”的状态将是第一个孩子你的容器，或更改nth-child()顺序）

• CSS2解决方案http://jsfiddle.net/eD2zL/2/ （之间的差异只是几个选择器）

基本上，你需要隐藏“正常”的状态，并将其悬停时显示“悬停”

就是这样，我希望有人觉得它有用。

Answer 3

我已经想出了一个解决方案，为我工作…

如果你有一个只包含链接的列表项（或div），假设这是针对你的页面上的社交链接到facebook，twitter等等。 你正在使用一个精灵图像，你可以这样做：

 <li id="facebook"><a href="facebook.com"></a></li> 

使“li”的背景成为你的按钮图像

 #facebook { width:30px; height:30px; background:url(images/social) no-repeat 0px 0px; } 

然后使链接的背景图像按钮的悬停状态。 同时添加不透明属性，并将其设置为0。

 #facebook a { display:inline-block; background:url(images/social) no-repeat 0px -30px; opacity:0; } 

现在你需要的是“a：hover”下的“opacity”，并将其设置为1。

 #facebook a:hover { opacity:1; } 

将每个浏览器的不透明度转换属性添加到“a”和“a：hover”，以便最终的CSS将如下所示：

 #facebook { width:30px; height:30px; background:url(images/social) no-repeat 0px 0px; } #facebook a { display:inline-block; background:url(images/social) no-repeat 0px -30px; opacity:0; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; -o-transition: opacity 200ms linear; -ms-transition: opacity 200ms linear; transition: opacity 200ms linear; } #facebook a:hover { opacity:1; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; -o-transition: opacity 200ms linear; -ms-transition: opacity 200ms linear; transition: opacity 200ms linear; } 

如果我正确地解释它应该让你有一个褪色的背景图像按钮，希望至少有帮助！

Answer 4

如果你可以使用jQuery，你可以尝试BgSwitcher插件来切换背景图片的效果，这非常容易使用。

例如 ：

 $('.bgSwitch').bgswitcher({ images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"], effect: "fade", interval: 10000 }); 

并添加自己的效果，请参阅添加效果类型

Answer 5

不幸的是，你不能在background-image上使用转换，请参阅动画属性的w3c列表 。

你可能想要做一些background-position技巧。

Answer 6

你可以使用伪元素来获得你想要的效果，就像我在那个小提琴中做的那样。

CSS：

 .title a { display: block; width: 340px; height: 338px; color: black; position: relative; } .title a:after { background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat; content: ""; opacity: 0; width: inherit; height: inherit; position: absolute; top: 0; left: 0; /* TRANSISITION */ transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; } .title a:hover:after{ opacity: 1; } 

HTML：

 <div class="title"> <a href="#">HYPERLINK</a> </div> 

Answer 7

如果opacity动画不是一个选项，你也可以动画background-size 。

例如，我使用这个CSS来设置一个具有延迟的backgound-image 。

 .before { background-size: 0; } .after { transition: background 0.1s step-end; background-image: $path-to-image; background-size: 20px 20px; } 

Answer 8

萨拉姆，这个答案只适用于Chrome，导致IE和FF支持颜色转换。

没有必要使你的HTML元素opacity:0 ，有时它们包含文本，并且不需要加倍你的元素！

链接到jsfiddle中的一个例子的问题需要一个小的改变，那就是把一个空的图像.title a像background:url(link to an empty image); .title a background:url(link to an empty image); 相同，你把它放在.title a:hover但使其空的形象，和代码将工作。

 .title a { display: block; width: 340px; height: 338px; color: black; background: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png) repeat; /* TRANSISITION */ transition: background 1s; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; } .title a:hover{ background: transparent; background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat; /* TRANSISITION */ transition: background 1s; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; } 

看看这个https://jsfiddle.net/Tobasi/vv8q9hum/

Answer 9

克里斯在这里鼓舞人心的帖子：

https://css-tricks.com/different-transitions-for-hover-on-hover-off/

我设法想出了这个：

 #banner { display:block; width:100%; background-repeat:no-repeat; background-position:center bottom; background-image:url(..http://img.dovov.comimage1.jpg); /* HOVER OFF */ @include transition(background-image 0.5s ease-in-out); &:hover { background-image:url(..http://img.dovov.comimage2.jpg); /* HOVER ON */ @include transition(background-image 0.5s ease-in-out); } } 

Answer 10

试试这个，将使背景动画在网络上工作，但混合移动应用程序不工作

 @-webkit-keyframes breath { 0% { background-size: 110% auto; } 50% { background-size: 140% auto; } 100% { background-size: 110% auto; } } body { -webkit-animation: breath 15s linear infinite; background-image: url(images/login.png); background-size: cover; }