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

Question

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

你可以在这里看到一个例子:http://jsfiddle.net/3UQYg/3/

当我使用像素时,图像确实会发生变化:请参见http://jsfiddle.net/3UQYg/2/.

我究竟做错了什么？!

Answer 1

background-position:x%y%;

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

• 当横坐标是0%,那么图像的左边对齐容器的左侧.
• 当横坐标为100%,则图像的右侧与容器的右侧对齐.
• 中间值是线性计算的.

同样的,

• 当坐标为0%,则图像的顶边对齐容器的上侧.
• 当坐标为100%,则图像的底部与容器的底部对齐.
• 中间值是线性计算的.