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像素的位置吧。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值