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

Question

我正在使用具有响应式设计的CSS3 / HTML5设计应用程序。

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

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

精灵尺寸为102px x 918像素;

精灵尺寸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

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