html - CSS RollOver Image via Background-position-x with Cover/Contain？

Question

当您提供的图像是所需实际像素大小的两倍时，iPhone 设备看起来最好。当您使用 contain 时，它会使图像看起来清晰漂亮。

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

这有效，除了... contain 将显示具有“打开和关闭”状态的整个背景图像。

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

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

或者这对效率有影响吗？

Answer 1

对于背景图像 sprite(也就是您所说的一个文件中的多个图像片段)，我更喜欢使用诸如此类的元素并对它们进行定位和调整大小，以便它们与我要显示的 sprite 片段的大小完全一致。

假设您有一个需要悬停效果或任何可能需要图像换入和换出的东西。最简单的做法是在图像中添加一个，这样您的基本 html 将是:

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

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

然后在你的 span 上将高度和宽度设置为 100% 并添加 position:absolute;顶部:0；左:0；并将您的背景图片应用于跨度。

然后你可以做 a:hover span { background: 0 10px; }等等等等