background-position释义

作者：zccst


background-position属性是通过平面上的x与y坐标定位的,所以通常取两个值.

必须先指定 background-image 属性。

该属性定位不受对象的补丁属性( padding )设置影响。

默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。

如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。

如果设置值为 right center ，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位。

对应的脚本特性为 backgroundPosition。


例如:

<percentage> <percentage>

左上角为0%, 0%. 右下角为100%, 100%.例如58%,56%就是从左上角算起,右移58%,下移56%.

<length> <length>

6cm 8cm,从左上角算起,右移6cm,下移8cm.


下面是一些等式

top left, left top 等价于 0% 0%.
top, top center, center top 等价于 50% 0%.
right top, top right 等价于 100% 0%.
left, left center, center left 等价于 0% 50%.
center, center center 等价于 50% 50%.
right, right center, center right 等价于 100% 50%.
bottom left, left bottom 等价于 0% 100%.
bottom, bottom center, center bottom 等价于 50% 100%.
bottom right, right bottom 等价于 100% 100%.

批注：一定记住这是设置背景图片时的位置。
left/right/center 以图片左为准、以图片右为准、左右居中
top/bottom/center 以图片上为准、以图片下为准、上下居中
同理：
0% 100% 以图片左为准、以图片右为准
0% 100% 以图片上为准、以图片下为准
如果只指定一个值，则默认为左右。上下使用默认值，即50%。


background-attachment -- 定义背景图片随滚动轴的移动方式
取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动