CSS RollOver图片通过背景-位置-x与封面/包含？

Question

当您提供的图像大小是所需实际像素的两倍时，iPhone设备的效果最佳。当您使用包含它将使图像看起来干净利落。

我为一个有两个状态的控件制作了一个背景图像。开&关。为了提高效率，而不是制作两个单独的图像，我制作了一个文件，当我单击控件来更改图像时，我所要做的就是更改background-position-x属性。

这是可行的，除了..。该容器将显示整个背景图像，同时显示“开”和“关”状态。

现在，我正在使用两个不同的图像来使控件更改图像。

有没有办法“包含”图像，但只包含源图像文件像素的一部分？这样我可以让它看起来不错，但使用1个文件而不是2个文件？

或者这对效率有影响吗？

Answer 1

对于背景图像精灵(这就是你所说的在一个文件中大量的图像片段)，我更喜欢使用像和这样的元素来定位和调整它们的大小，这样它们就是我想要展示的精灵片段的确切大小。

因此，假设你有一个需要悬停效果或任何可能需要图像来交换进出的东西。最简单的做法是在图像内部添加，这样您的基本html将为：

<a href="#><span></span></a>

然后调整大小并添加position:relative；

然后在跨度上，将高度和宽度设置为100%，并添加position:absolute；top:0；left:0；并将背景图像应用到跨度。

然后你可以做一些事情，比如:hover span { background: 0 10px；}等等。