我正在尝试使用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;
}
答案 0 :(得分：93)
您可以转换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不确定。
答案 1 :(得分：35)
解决方案（我自己发现）是一个忍者技巧，我可以为你提供两种方式：
首先，您需要为<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()订单）< / p>
CSS2 解决方案http://jsfiddle.net/eD2zL/2/（两者之间的差异只是几个选择器）
基本上，您需要隐藏“正常”状态并在悬停时显示“悬停”
就是这样，我希望有人觉得它很有用。
答案 2 :(得分：15)
我找到了一个对我有用的解决方案......
如果你有一个只包含链接的列表项（或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;
}
然后将链接的背景图像设置为按钮的悬停状态。还要为此添加opacity属性并将其设置为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;
}
如果我正确解释了应该让你有一个褪色的背景图像按钮，希望它至少有帮助！
答案 3 :(得分：11)
很遗憾，您无法在background-image上使用过渡，请参阅w3c list of animatable properties。
你可能想用background-position做一些技巧。
答案 4 :(得分：10)
您可以使用伪元素来获得您想要的效果，就像我在Fiddle中那样。
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>
答案 5 :(得分：9)
如果你可以使用jQuery，你可以试试BgSwitcher插件来切换背景图像效果，它非常容易使用。
例如：
$('.bgSwitch').bgswitcher({
images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
effect: "fade",
interval: 10000
});
添加您自己的效果，请参阅adding an effect types
答案 6 :(得分：3)
如果无法设置动画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;
}
答案 7 :(得分：2)
您无需制作HTML元素opacity:0，因为有时候它们包含文字，而且无需将元素加倍！
链接到jsfiddle中的示例的问题需要进行一些小的更改，即将.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;
}
空图像，代码将起作用。
jq答案 8 :(得分：1)
试试这个，会让背景动画在网络上工作，但混合移动应用程序 不工作
@-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;
}
答案 9 :(得分：1)
考虑到背景图像无法动画， 我创建了一个小SCSS mixin，允许使用伪选择器之前的和之后的在2个不同的背景图像之间进行转换。它们位于不同的z-index层。前面的那个以不透明度0开始，并且在悬停时变得可见。
您可以使用相同的方法创建具有线性渐变的动画。
@mixin bkg-img-transition( $bkg1, $bkg2, $transTime:0.5s ){
position: relative;
z-index: 100;
&:before, &:after {
background-size: cover;
content: '';
display: block;
height: 100%;
position: absolute;
top: 0; left: 0;
width: 100%;
transition: opacity $transTime;
}
&:before {
z-index: -101;
background-image: url("#{$bkg1}");
}
&:after {
z-index: -100;
opacity: 0;
background-image: url("#{$bkg2}");
}
&:hover {
&:after{
opacity: 1;
}
}
}
现在您只需将其与
一起使用即可@include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300");
答案 10 :(得分：0)
克里斯在这里鼓舞人心的帖子：
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(../images/image1.jpg);
/* HOVER OFF */
@include transition(background-image 0.5s ease-in-out);
&:hover
{
background-image:url(../images/image2.jpg);
/* HOVER ON */
@include transition(background-image 0.5s ease-in-out);
}
}
答案 11 :(得分：0)
通过使用伪元素（如以下答案所示），可以使用比已接受答案更大的跨浏览器支持来实现：https://stackoverflow.com/a/19818268/2602816
答案 12 :(得分：0)
我为此付出了一些努力，我首先将一叠图像彼此叠加使用，每三秒钟，我试图制作动画到该叠中的下一个图像，然后将当前图像扔到堆栈。同时，我正在使用如上所述的动画。我无法让它为我的一生工作。
您可以使用此库，该库允许使用jquery-backstretch **动态调整大小，支持幻灯片的背景图像**。