Html 通过Background-position-x和Cover/Contain的CSS滚动图像？

当你给出的图像是实际所需像素的两倍时，iPhone设备看起来最好。当您使用contain时，它将使图像看起来清晰美观

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

这是有效的，除了。。。包含的将显示整个背景图像，同时显示“开和关”状态

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

是否有一种方法可以“包含”图像，但仅包含源图像文件的一部分像素？这样我可以使它看起来很好，但使用1个文件而不是2个

---

或者这对效率有影响吗？

对于背景图像精灵（你称之为一个文件中的多个图像片段），我更喜欢使用元素，例如和它们的位置和大小，以便它们是我想要显示的精灵片段的精确大小

假设你有一个需要悬停效果或任何需要图像交换的东西。最简单的方法是在图像中添加一个html，使您的基本html为：

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

然后调整大小并添加位置：相对

然后在跨度上设置高度和宽度为100%，并添加位置：绝对；排名：0；左：0；并将背景图像应用于跨度

---

然后你可以做：hover span{background:0 10px；}等操作。

你能创建一个fiddle:jsFiddle吗？是的，我想我需要更好地解释这个问题，让我用jsFiddle重新提出这个问题。