CSS背景位置固定于父元素

Question

我的问题有点棘手，我不确定是否可能，但我记得以前做过或者在某处见过。 所以，我正在制作一个水平菜单。我有一个大小为980x36像素的div块。它有一个背景图片：

我在里面有一些链接（<a href="/">text</a>），我让这些链接成为块级元素（display: block;）并向左浮动。所以现在它看起来更像这样：

现在我希望所有活动链接和鼠标悬停的链接都有不同的背景，就像这样：

这里的问题是我的背景图片（鼠标悬停时）再次是980x36像素，并且在不同的水平位置上与第一个背景不同，左侧为蓝色，右侧为红色。

现在，当我悬停在链接上时，我必须设置背景位置的一些负水平值，例如对于第三个链接，我应该设置类似background-position: -233px 0px; 这样两个背景颜色就会匹配。

我的问题是如何自动实现这个效果？这里有个棘手的问题：我不知道所有链接的宽度，因为它们是文本，并且应支持多语言（因此显然不能预先制作图像）。我不想使用 PNG（我可以轻松地制作半透明的“玻璃”，它将与第一个背景叠加并创建相同的效果）- 因为.. 猜猜是谁，是的IE6。最后，我希望使用一种漂亮、干净且广泛支持的技术来完成这个效果，所以JavaScript不在考虑范围内（我知道这很容易，我可以做到，我只是不想使用它）。

在这种情况下熟悉的方法是 background-attachment: fixed;。在这种情况下，如果我能将每个链接的背景位置固定到容器 div 的位置就好了。那就太完美了！正是我需要的！每个链接都会在它的位置上，但背景会呈现为在容器 div 上一样！问题在于，如果有人知道一个好的解决方案.. 如果没有，我应该考虑更少的痛苦，目前我认为是尝试 PNG 方法，也许加上一些 IE 修复程序？

- Tony Bogdanov

---

你应该发现 <br /> 标签的神奇之处。 - LostLin

@Ima：你应该发现回车键的魔力。 - BoltClock

@Bolt: s/Enter/Shift/？ - Matt Ball

@Matt Ball：我指的是使用Markdown的自动换行，而不是HTML的<br />。但是没错，他也应该发现Shift键。 - BoltClock

@Jaspero CSS Sprites是构建此内容的方式。也许我应该在这个上面使用jQuery。 - Tony Bogdanov

Answer 1

你应该像你在问题中描述的那样使用 .png。

要修复IE6，你应该使用众多可用的基于JavaScript的 .png 修复之一，例如：

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

迎合使用IE6且禁用JavaScript的用户这一微不足道的百分比，而削弱自己是不值得的。

（是的，我知道这个问题很老了，你可能已经创建了你的菜单）

- thirtydot

Answer 2

我脑海中最快的解决方案是使用jQuery来相应地定位背景（您可以检查每个元素的位置并更改其CSS背景位置）。

- mingos

---

是的，我知道，我想看看是否有更多...只用CSS的浏览器制作方式。 - Tony Bogdanov

我正在尝试一种纯CSS的解决方案……但是运气不好:/ - Hristo

我怀疑这个问题没有不需要JS的解决方案。如果有的话，我很乐意知道，但目前为止，我还没有听说过（我想）。 - mingos