用绝对定位创建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>元素上。