html - 响应式设计中具有背景位置和宽度百分比的精灵

Question

我正在设计一个带有响应式设计的 CSS3/HTML5 应用程序。

为了性能，我使用精灵而不是普通图像。所以，我使用background-imageand background-position。在整个应用程序上，纵横比保持不变。

在带有像素和background-position百分比的宽度中，图像显示得很好。但是在具有百分比 和 的宽度中background-position，图像有时看起来很糟糕（当精灵有两个以上的图像时）。

精灵大小 102px x 918 px；

sprite 中的每个图像大小为 102px x 102px；

当有 9 个图像时，红色十字是精灵中的最后一个图像。

看到坏的背景位置：

它是一样的，但 637px 显示不错：

有人知道如何用 CSS3 修复它吗？

更新： 我的问题是宽度和背景位置的百分比。

background-position: 0 100%; // Show the second image in the sprite.
background-position: 0 700%; // Show image 8 in the sprite but sometimes, in some width, the image showed is the image 8 and a little image 7.

Answer 1

问题在于背景尺寸：封面。浏览器没有呈现正确的宽度和高度。要修复它，我使用：

background-size: 100% 900%; // 100% to adjust to width and 900% is to mantain proportions in the height. (9 images of 102px in this case)

我在 chrome 26 中进行了测试。

Answer 2

与固定像素相比，百分比值最适合移动设备。检查此问题以更好地了解像素与百分比。