悬停时背景图像之间的 CSS 淡入淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6948758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Fade Between Background Images on Hover
提问by Hyman
Is there a way that I can do the following?
有没有办法可以做到以下几点？
I have a transparent png sprite that shows a standard picture on the left, and a picture for the :hover state on the right.
我有一个透明的 png 精灵，左侧显示标准图片，右侧显示 :hover 状态的图片。
Is there a way that I can have the image fade from the left image into the right image on :hover using only css3 transitions? I've tried the following, but it doesn't work:
有没有办法让图像从左侧图像淡入右侧图像：悬停仅使用 css3 转换？我尝试了以下方法，但不起作用：
li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;}
li{background:url(/img/sprites.png) 0 -50px no-repeat;}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;}
Now, the above does animate the background, it pans the image across. What I'd like instead of a pan is a fade or dissolve effect.
现在，上面确实为背景设置了动画，它可以平移图像。我想要的是淡化或溶解效果而不是平底锅。
UPDATE:I ended up having to create two elements and just animate the opacities separately. It's a tad messy because I have to specify the exact margins of each element, but I guess it'll work. Thanks for everyones help :)
更新：我最终不得不创建两个元素并分别为不透明度设置动画。这有点混乱，因为我必须指定每个元素的确切边距，但我想它会起作用。谢谢大家的帮助:)
回答by Benjamin
The latest news on this topic:
关于这个话题的最新消息：
Chrome 19 and newer supports background-image transitions:
Chrome 19 及更新版本支持背景图像转换：
Demo: http://dabblet.com/gist/1991345
演示：http: //dabblet.com/gist/1991345
Additional info: http://oli.jp/2010/css-animatable-properties/
回答by Joseph Hamilton
You haven't specified any code to do the actual transition.
您尚未指定任何代码来执行实际转换。
http://css3.bradshawenterprises.com/cfimg1/
http://css3.bradshawenterprises.com/cfimg1/
Try this out in your hover style:
在你的悬停风格中试试这个：
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
回答by Rauzippy
Take a look at this: http://jsfiddle.net/j5brM/1/
看看这个：http: //jsfiddle.net/j5brM/1/
I think this suits all your needs and its a little bit less complicated.
我认为这适合您的所有需求，而且不那么复杂。
回答by Paul D. Waite
I don't think you can change the opacity of just background images in CSS, so unless you have two separate elements for the background image (one for each position of the sprite) and change the opacity of both of them on hover, I think you're stuck.
我不认为你可以在 CSS 中改变背景图像的不透明度，所以除非你有两个单独的背景图像元素（一个用于精灵的每个位置）并在悬停时更改它们的不透明度，我认为你被困住了。
回答by Joseph Marikle
li{background:url(/img/sprites.png) 0 -50px no-repeat; background:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background:rgba(100, 125, 175, 0);}
should be
应该
li{background:url(/img/sprites.png) 0 -50px no-repeat; background-color:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background-color:rgba(100, 125, 175, 0);}
not sure if that fixes it or not though.
不知道这是否能解决它。
回答by Towelie
I know this may be a tad late. But I was struggling with the same issue for a long time. Also with transparent sprites many solutions don't seem to work.
我知道这可能有点晚了。但是我很长一段时间都在为同样的问题苦苦挣扎。同样对于透明精灵，许多解决方案似乎都不起作用。
What I did is this
我做的是这个
HTML
HTML
<div class="sprite-one">
<span class="foo"></span><span class="zen"></span>
</div>
CSS
CSS
.sprite-one {
height: 50px
width: 50px
}
.sprite-one span {
width: 50px;
height: 50px;
display: block;
position: absolute;
}
.foo, .zen {
background-image: url(sprites.png) no-repeat;
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
}
.foo {
background-position: 0 0;
opacity: 1;
}
.zen {
background-position: -50px 0;
opacity: 0;
}
.sprite-one:hover .foo {
opacity: 0;
}
.sprite-one:hover .zen {
opacity: 1;
}
This is a pure css way & has a bit of a lot of coding.. but seems be the only way I achieved the desired effect! Hope people that also stumble onto this can find some help from this!
这是一种纯 css 方式&有很多编码..但似乎是我达到预期效果的唯一方法！希望也偶然发现此问题的人可以从中找到一些帮助！
回答by user3242800
<li class="image transition"></li>
css:
.image{
background-image: url("some/file/path.png");
background-repeat: no-repeat;
width: XXpx;
height: XXpx;
background-position: center center;
background-size: cover;
}
/* DRY */
.transition{
transition: background 0.6s;
-webkit-transition: background 0.6s;
}
.image:hover{
background-image: url("some/file/path_hoverImage.png");
}
回答by Ashish Kumar
CSS:-
CSS:-
li { background: url(http://oakdale.squaresystem.co.uk/images/solutions.png) no-repeat left center; background-size: 89px; padding: 54px 0 54px 130px; webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear; }
li { 背景：url( http://oakdale.squaresystem.co.uk/images/solutions.png) 无重复左中；背景尺寸：89px；填充：54px 0 54px 130px；webkit-transition：所有 0.5s 线性；-moz-transition：所有 0.5s 线性；-o-transition：所有 0.5s 线性；过渡：全0.5s线性；}
li:hover { background-size: 50px }
li:hover { 背景尺寸：50px }
