Question

我有两张图片，我想用它们作为具有悬浮效果的链接。所有图像和悬停图像都存在于单个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我不确定你确切的问题是什么，除了悬停不能正常工作。

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

你的png怎么制作？图像是在另一个上面还是并排？背景位置的语法首先是水平的，然后是垂直定位。（向后倾斜。）如果使用顶部，底部，左侧，右侧或中心，大多数浏览器将向后解析语法（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 */
}

只是不在一边，你应该总是尝试在<a>元素上使用你的css精灵。

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

1 个答案: