不顯示的精靈

Question

Sprite翻轉圖像不顯示。

目標是讓一排圖標帶有由CSS控制的翻轉。

目前，下面的代碼不顯示任何圖像...我錯過了什麼？

CSS：

#social { 
    margin: 0; 
    padding: 0; 
    height: 15px; 
} 
#social li { 
    margin: 0 5px 0 0; 
    padding: 0; 
    list-style-type: none; 
    display: inline; 
    height: 15px; 
    float: left; 
} 
#social li.last{ 
    margin-right:0px; 
} 
#social li a { 
    background-image: url("../images/icon_twitter.png") 0px 0px; 
    background-repeat: no-repeat; 
    display: block; 
    height: 15px; 
    width: 18px; 
} 
#social li#social-twitter a{ 
    background-position: 0px 0px; 
} 
#social li#social-twitter a:hover { 
    background-position: 0px -15px; 
} 
#social li#social-youtube a{ 
    background-position: -18 top; 
} 
#social li#social-youtube a:hover { 
    background-position: -18 -15px; 
} 
#social span { 
    display: none; 
} 

HTML：

<ul id="social"> 
<li id="social-twitter"><a href="#"><span>Twitter</span></a></li> 
<li id="social-youtube" class="last"><a href="#"><span>Youtube</span></a></li> 
</ul> 

Answer 1

您正在嘗試設置內background-image背景位置。

更改此：

background-image: url("../images/icon_twitter.png") 0px 0px; 

要這樣：

background-image: url("../images/icon_twitter.png"); 
background-position: 0px 0px; 

Answer 2

問題：您正在使用background-position與background-image財產

解決方案：，要麼只使用background財產或使用background-position分別

background: color url(src) repeat position; 

或

background-image: url(src); 
background-position: position; 

您的代碼應該是這樣的：

background: url("../images/icon_twitter.png") 0 0 no-repeat; 

注：應與非零數字和零使用px（或者其他單位）應沒有單位使用。