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