響應式設計中的背景位置和寬度百分比的小精靈

Question

我正在設計一個具有響應式設計的CSS3/HTML5應用程序。

對於性能，我使用精靈而不是普通圖像。所以，我使用background-image和background-position。在整個應用中，縱橫比保持不變。

在像素寬度爲background-position且百分比爲background-position時，圖像顯示效果很好。但在百分比和background-position的寬度中，圖像有時看起來很糟糕（當精靈有兩個以上的圖像時）。

精靈大小102px x 918 px;

精靈尺寸爲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以更好地瞭解像素與百分比。