这是背景图片:
#logo
{background-image:url('logo.png');width:20px;height:23px;}
#logo:hover
{background-position:0 -23px;-webkit-transition: all 0.5s ease;}
#logo span
{margin-left:-3000px;}
<a href="#"><div id="logo"><span>logo</span></div></a>
此代码为我提供了幻灯片效果(从黑色 S 到粉色 S 的垂直幻灯片),而不是我正在寻找的淡入淡出效果。创建两个图像可以解决问题,但在这种情况下这是不可能的。
仅使用一张图像时如何获得淡入淡出效果?
最佳答案
试试这个 - http://jsfiddle.net/Wds5z/4/
a, #logo {
background: url('/image/w5ZnN.png') 0 -23px;
width: 20px;
height: 23px;
display: block;
}
#logo {
background-position: 0 0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
transition: opacity .5s linear;
}
#logo:hover {
opacity: 0;
}
#logo span {
margin-left:-3000px;
}
关于CSS 过渡图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11370779/