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

Question

我正在使用CSS sprites来构建一个六选项卡菜单。由于选项卡重叠，我决定在精灵中使用六个版本的图像，每个活动选项卡状态一个（一个在另一个下面）。所以我需要为每个状态改变多个选项卡，因为相邻的重叠部分，所以我不妨改变它们全部的位置。

在菜单中，菜单中的每个链接都有自己的CSS背景，从精灵图像定义。它很好地融合在一起。

我希望做的是添加一个类，将改变所有的链接背景的垂直位置，而不必定义水平，这样的水平位置是可以继承的身体。这样我只需要定义六个类来让它工作，而不是每个状态中的六个（= 36）。

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

我可以用jQuery轻松实现，但希望获得仅限CSS的解决方案。

Answer 1

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

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

我打算假设你有一个你想用于多种菜单状态的精灵。在这种情况下，你应该只将2分为精灵，一个用于状态a，另一个用于状态b，当你添加类时，你只需切换到图像b background-image。

这是一个更多的图像，但实际上没有一个交叉浏览器的方式来移动一个轴。