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背景位置）。