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

Question

我正在使用 CSS3/HTML5 设计一个响应式设计的应用。

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

在宽度为像素和 background-position 为百分比的情况下，图像显示效果很好。但是在百分比和 background-position 的宽度下，图像有时看起来很糟糕(当 sprite 有两个以上的图像时)。

Sprite 尺寸 102px x 918 px;

Sprite 大小为 102px x 102px 的每张图片；

当有 9​​ 张图片时，红色叉号是 Sprite 中的最后一张图片。

看到坏的背景位置:

它是一样的，但是 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: cover 上。浏览器未呈现正确的宽度和高度。为了修复它，我使用:

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 中测试过。