CSS3背景转换

Question

所以我想重新创建那个色带转换http://subtlepatterns.com/，但我做错了。我的丝带图像是140x160 [宽度，高度]，但悬停没有任何反应。

我把：

#toplogo { 
    position: absolute; 
    left: 400px; 
    background-position: 0px -10px; 
    z-index: 5000; 
} 


#toplogo a { 
    background: url('ribbon.png') no-repeat; 
    width: 140px; 
    height: 160px; 
    display: block; 
    background-position: 0px -10px; 
    text-indent: -9999px; 
    -webkit-transition: 0.10s ease-in; 
    -moz-transition: 0.10s ease-in; 
} 



<div id="toplogo"> <a href="/">hello</a> </div> 

Answer 1

在CSS中添加这一点 -

#toplogo a:hover{ 
    background-position: 0px 0px; 
} 

Answer 2

尝试

#toplogo a { 
    background: url('ribbon.png') no-repeat; 
    width: 140px; 
    height: 160px; 
    display: block; 
    background-position: 0px -10px; 
    text-indent: -9999px; 
    -webkit-transition: background-position .1s ease-in; 
    -moz-transition: background-position .1s ease-in; 
} 

#toplogo a:hover { 
    background-position: 0 0; 
}