html - 使用绝对定位创建 CSS 背景图像 Sprite 时出现问题

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 Sprite 是垂直放置的 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 */
}

另一方面，您应该始终尝试在 <a> 上使用您的 css sprites元素。