CSS背景位置固定到父级

Posted 2023-03-06

【中文标题】CSS背景位置固定到父级

【英文标题】：CSS background-position fixed to parent

【发布时间】：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 键。

【参考方案1】：

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

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

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

迎合极少数使用 IE6并且禁用 JavaScript 的用户是不值得的。

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

【参考方案2】：

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

【讨论】：

是的，我知道，我想看看是否会有更多.. 仅使用 css 的浏览器制作方式..

我正在研究一个纯 CSS 的解决方案......虽然没有任何运气：/

我怀疑是否有无 JS 的解决方案。如果有，我会很高兴知道，但到目前为止，我还没有听说过（我想）。