使用背景位置和图像精灵的百分比

Question

我正在尝试在图片精灵中使用background-position属性和百分比。它似乎没有工作，即它不会移动背景图像。

您可以在此处查看示例：http://jsfiddle.net/3UQYg/3/

当我使用像素时，图像确实会发生变化：请参阅此处http://jsfiddle.net/3UQYg/2/。

我做错了什么？！

Answer 1

background-position：x％y％;

实际上，背景位置百分比的工作原理如下：

• 当横坐标为0%时，图像的左侧会对齐容器的左侧。
• 当横坐标为100%时，图片的右侧与容器的右侧对齐。
• 中间值是线性计算的。

类似地，

• 当纵坐标为0%时，图片的顶部会对齐容器的顶部。
• 当纵坐标为100%时，图片的底部与容器的底部对齐。
• 中间值是线性计算的。

---

Answer 2

完全。

与背景位置的百分比相比，像素的工作方式不同。作为总结：背景位置：30％10％例如将位于图像的30％10％的点与您的DIV或HTML标签的30％10％轴对齐。计算百分比数字并不那么明显。

下一篇文章解释了这一切： http://www.sitepoint.com/css-using-percentages-in-background-image/