html - 是否可以使用 CSS 覆盖 CSS 背景位置的一个轴？

Question

我正在使用 CSS sprites 构建一个六选项卡菜单。由于选项卡重叠，我决定在 Sprite 中使用图像的六个版本，一个用于每个事件选项卡状态(一个在另一个下面)。因此，由于相邻的重叠，我需要为每个状态更改多个选项卡，因此我不妨更改所有选项卡的位置。

在菜单中，菜单中的每个链接都有自己的从 sprite 图像定义的 CSS 背景。这一切都很好地结合在一起。

我想做的是向正文添加一个类，该类将更改所有链接背景的垂直位置，而无需定义水平，以便水平位置可以继承。这样，我只需要再定义六个类即可使其工作，而不是为每个状态定义六个类 (=36)。

相当于background-position:inherit -94px。

我可以使用 jQuery 轻松完成此操作，但希望有一个仅 CSS 的解决方案。

Answer 1

不，这是不可能的。主要是因为 Firefox 不支持 background-position-x 和 background-position-y 虽然可以理解，因为它不是规范的一部分。

不久前我自己也遇到了这个问题，但简短的调查告诉我这仍然不可能。

我假设您有一个 Sprite 想要用于菜单的多种状态。在这种情况下，您应该将 Sprite 分成 2 部分，一份用于状态 a，一份用于状态 b，当您添加类时，您只需使用 background-image 切换到图像 b。

这当然是又一张图像，但确实没有一种跨浏览器的方法可以只移动一个轴。