css - 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 到粉红色的垂直幻灯片），而不是我正在寻找的淡入淡出效果。创建两个图像可以解决问题，但在这种情况下这是不可能的。

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

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;
}​