CSS：background-position可以指定为负值

Ext中很多用到了background-position，而且很多有负值，弄得我稀里糊涂的。摘抄如下：


允许值: [<百分比> | <长度>]{1,2} | [top | center | bottom] || [left | center | right]




初始值: 0% 0%




适用于: 块级及替换元素




向下兼容: 否






图象位置属性给出指定背景图象的最初位置。这个属性只能应用于块级元素和替换元素。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT。)




安排背景位置最容易的方法是使用关键字:




横向的关键字 (left, center, right)


纵向的关键字 (top, center, bottom)


百分比和长度也可用作安排背景图象的位置。百分比和元素字体大小有关。虽然使用长度是允许的，但因为它们处理不同的显示分辨率有不可避免的缺点，所以不被推荐。




当使用百分比或长度时，需首先指定横向位置，接着是纵向位置。一个值，例如20% 65%，指定图象的左起20%上起65%的那点会被放在元素的左起20%上起65%的那点的所在位置。一个值如5px 10px，指定图象的左上角会被放在元素的左起5像素上起10像素的位置。




如果仅给出横向的值，纵向位置的值为50%。长度和百分比的组合是允许的，负值也行。例如，10% -2cm是允许的。虽然，百分比和长度是不能够和关键字组合。




关键字解释如下:




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%


如果背景图象被看作油画般固定不动，关于油画的图象会代替元素被放置。




网页制作者也可以使用略写的背景属性，通常会比背景位置属性获得更好的支持。



如果指定为负值，应该刚好是跟正值相反的方向吧。如backgroud-position：0 -10px，应该是当前元素位置顶部10像素的位置吧。