使用绝对定位创建 CSS 背景图像精灵时出现问题

Question

我有 2 张图像，想用作具有悬停效果的链接。所有图像和悬停图像都存在于单个 png 文件中。

我遇到的问题是第一个图像工作得很好，但第二个图像出现时，悬停图像从 top: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，我不确定你的确切问题是什么，除了悬停无法正常工作。

正如 Pointy 所说，为了使 top 和 right 正常工作，您必须将元素声明为绝对位置（这会将其从页面流中删除。）

另外，您的 png 是如何制作的？一个图像是在另一个图像之上还是并排？背景位置的语法是先水平定位，然后垂直定位。 （有点向后。）如果您使用顶部、底部、左侧、右侧或中心，大多数浏览器将解析向后语法（background-position: top center;）。但使用数字时，它们的顺序必须正确。

你的数字看起来有点奇怪。通常CSS精灵是垂直完成的，并定位background-position: top;，然后移动的高度（这将是PNG总高度的一半）向下悬停。

假设您的 的高度是 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 精灵 元素。