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