【发布时间】：2011-08-14 06:31:52
【问题描述】：
我的问题有点棘手，我不确定这是否可能，但我想我记得以前做过或在某处看到过。 所以，我正在制作一个水平菜单。我有一个大小为 980x36px 的 div 块。它有一个背景图片：
在里面我有链接 <a href="/">text</a>)，我制作了块元素 (display: block;) 并向左浮动。所以现在它看起来更像这样：
现在我希望所有活动链接和鼠标悬停的所有链接都具有不同的背景，如下所示：
这里的问题是我的背景图像（悬停时）再次为 980x36 像素，并且在不同的水平位置上有所不同，就像第一个背景一样，左侧为蓝色，右侧为红色：
所以，现在当我将鼠标悬停在一个链接上时，我必须将背景位置设置为一些负的水平值，例如对于第三个链接，我应该设置类似 background-position: -233px 0px;这样两个背景的颜色就可以匹配了。
我的问题是如何自动完成？这是棘手的部分：我不知道所有链接的宽度，因为它们是文本并且应该支持多语言（因此它们显然不能是预制图像）。我不想使用 PNG（我可以很容易地制作一个半透明的“玻璃”，它会覆盖第一个背景并产生相同的效果）——因为......猜猜是谁，是的 IE6。最后，我希望使用一种不错、干净且广泛支持的技术来完成这项工作，因此 JavaScript 是不可能的（我知道这很容易，我可以做到，我只是不想使用它）。
在这种情况下熟悉的是background-attachment: fixed; 方法。在这种情况下，如果我可以将每个链接的背景位置固定到容器 div 的位置，那就太好了。那将是完美的！正是我需要的！每个链接都会在它的位置上，但背景会呈现在容器 div 上！好吧，这就是问题所在，如果有人知道一个好的解决方案.. 如果没有，我应该考虑减少痛苦，在我看来，目前可能是尝试使用一些 IE 修复程序的 PNG 方式？
【问题讨论】：
-
您应该会发现
<br />标签的魔力 -
@Ima：你应该会发现 Enter 键的魔力。
-
@Bolt:
s/Enter/Shift/? -
尝试 CSS Sprites 方法并根据需要定位背景图像。
-
@Matt Ball：我指的是使用 Markdown 的自动换行符而不是 HTML
<br />。但确实，他也应该发现 Shift 键。
标签： css image background position fixed