CSS 过渡图像

Question

这是背景图片:

#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 的垂直滑动)而不是我正在寻找的淡入淡出效果。创建两个图像可以解决问题，但在这种情况下这是不可能的。

如何在仅使用一张图片时获得淡入淡出效果？

Answer 1

试试这个 - http://jsfiddle.net/Wds5z/4/

a, #logo {
    background: url('http://i.stack.imgur.com/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;
}​