3

我正在尝试background-position在图像精灵中使用具有百分比的属性。虽然它似乎不起作用，即它不会改变背景图像。

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

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

我究竟做错了什么？！

4

2 回答 2

7

背景位置：x% y%；

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

在此处输入图像描述

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

相似地，

  • 当纵坐标为0%时，图像的顶部对齐容器的顶部。
  • 当纵坐标为100%时，图像的底边与容器的底部对齐。
  • 中间值是线性计算的。
于 2015-01-18T12:45:01.323 回答
0

确切地。

像素的工作方式与背景位置的百分比不同。总而言之：例如 background-position:30% 10% 会将位于图像 30% 10% 处的点与包含 DIV 或 HTML 标签的 30% 10% 轴对齐。计算百分比数字并不那么明显。

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

于 2014-02-04T12:13:13.863 回答