CSS后台位置固定为父级

Question

我的问题有点棘手，我不确定是否有可能，但我想我有记忆之前做过或在某处看过它。 所以，我正在做一个水平的菜单。我有一个大小为980x36px的div块。它有一个背景图片：

在里面我有链接<a href="/">text</a>），我创建了块元素（display: block;）并向左浮动。所以现在看起来更像是这样：

现在我希望所有活动链接和鼠标覆盖的所有链接都有不同的背景，如下所示：

这里的问题是我的背景图像（悬停时）再次是980x36像素，不同的水平位置就像第一个背景一样，左边是蓝色，右边是红色：

所以，现在当我将鼠标悬停在一个链接上时，我必须将背景位置设置为负的水平值，例如对于第三个链接我应该设置像background-position：-233px 0px;所以两种背景的颜色都适合。

我的问题是如何自动完成？这是一个棘手的部分：我不知道所有链接的宽度，因为它们是文本，应该支持多语言（因此它们显然不能是预先制作的图像）。我不想使用PNG（我可以很容易地制作一个半透明的'玻璃'，它会覆盖第一个背景并产生相同的效果） - 因为..猜谁，是IE6。最后我想要用一个漂亮，干净且广泛支持的技术来完成，所以JavaScript是不可能的（我知道它很容易，我可以做到，我只是不想使用它）。

在这种情况下熟悉的是background-attachment: fixed;方法。在这种情况下，如果我可以将每个链接的背景位置固定到容器div的位置，那将是很好的。那将是完美的！正是我需要的！每个链接都在它的位置，但背景将呈现为好像它在容器div上！好吧，那就是问题，如果有人知道一个好的解决方案..如果不是我应该考虑减少痛苦，在我看来，目前是尝试使用某些IE修复工具的PNG方式？

Answer 1

您应该使用问题中描述的.png。

要修复IE6，您应该使用许多可用的基于JavaScript的.png修复程序之一，例如：

http://www.dillerdesign.com/experiment/DD_belatedPNG/

通过使用IE6 和禁用JavaScript的用户的极小百分比来迎合自己是不值得的。

（是的，我意识到问题已经过去了，你可能已经创建了菜单）

Answer 2

我想到的最快的解决方案是使用jQuery相应地定位背景（你可以检查每个元素的位置，只是改变它的CSS背景位置）。