用絕對定位創建CSS背景圖片精靈的問題

Question

我有2張圖片，我想用它作爲鏈接效果。所有的圖像和hoverover圖像都存在於一個PNG文件中。

我遇到的問題是，第一圖像工作得很好，但同時與hoverover圖像的第二圖像顯示在頂部開始：0和我想要的形象會看到它下面。如果我將#MCD a{更改爲#MCD{，則圖像正確顯示，但圖像的所有鏈接功能均消失。

HTML

<ul id="sites"> 
<li id="LL"><a href="" /></li> 
<li id="MCD"><a href="" /></li> 
</ul> 

CSS

#sites{ 
position:absolute; 
margin:0; 
padding:0; 
top:250px; 
left:700px; 
width:500px; 
background:transparent; 
display:block; 
} 

#sites li{ 
position:absolute; 
list-style:none; 
right:0; 
} 

#LL a{ 
display:block; 
width:442px; 
height:43px; 
background:url(sitesprites.png) 0 0; 
} 

#LL a:hover{ 
background:url(sitesprites.png) 0 -44px; 
} 

每次我收到

#MCD a{ 
position:absolute; 
display:block; 
right:0; 
top:78px; 
width:384px; 
height:54px; 
background:url(sitesprites.png) left -88px; 
} 

#MCD a:hover{ 
background-position:left -143px; 
} 

在這裏，編輯迴應是的jsfiddle：http://jsfiddle.net/lipestyle/77a2z/

Answer 1

沒有你的HTML我不知道你確切的問題是什麼，除了懸停無法正常工作。

由於尖說，爲了使頂部和右側工作，你必須聲明元素是絕對位置（這會從頁面的流量將其刪除。）

而且是如何的PNG做？是在另一個上面的圖像還是並排？背景位置的語法是先水平再垂直定位。 （種類倒退）。如果使用top，bottom，left，right或center，大多數瀏覽器都會解析語法（background-position: top center;）。但是在使用數字時，他們必須按照正確的順序。

你的數字看起來有點怪異。一般的CSS子畫面被垂直地完成並定位background-position: top;然後移動<a>（這將是一半的總的PNG的高度）的高度向下懸停。

假設你<a>的高度爲PNG圖像的高度的一半，你的PNG圖片都垂直，嘗試這樣的事情：

#MCD a{ 
    display: block; 
    width:384px; 
    height:54px; 
    background:url(sitesprites.png) left top; 
} 

#MCD a:hover{ 
    background-position: left -54px; /* just use background position instead of redefining the image */ 
} 

只是一個側面沒有，你應該總是嘗試使用你的CSS精靈在<a>元素上。