CSS背景:background-position

background-position简介
background-position属性在CSS背景中是比较常用的,本文将带你深入理解background-position属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上background-position的实例,希望能够对你有所帮助。
background-position定义和用法

background-position:<position> [ , <position> ]*

<position> = [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]

默认值0% 0%,效果等同于left top

适用于:所有元素

继承性:无

动画性:是

计算值:指定值

background-position属性值
<percentage>:
用百分比指定背景图像填充的位置。可以为负值。
<length>:
用长度值指定背景图像填充的位置。可以为负值。
center:
背景图像横向和纵向居中。
left:
背景图像在横向上填充从左边开始。
right:
背景图像在横向上填充从右边开始。
top:
背景图像在纵向上填充从顶部开始。
bottom:
背景图像在纵向上填充从底部开始。
background-position说明
设置或检索对象的背景图像位置。必须先指定background-image属性。
  • 该属性提供2个参数值(CSS3中已允许提供4个值)
  • 如果提供四个,每个<percentage>或<length>偏移前都必须跟着一个关键字(即left | center | right | top | bottom),偏移量相对关键字位置进行偏移。
  • 示例:假设要定义背景图像在容器中右下方,并且距离右边和底部各有20px 你也可以设置3个参数值:
  • 如果提供两个,第一个用于横坐标,第二个用于纵坐标。
  • 如果只提供一个,该值将用于横坐标;纵坐标将默认为50%(即center)。
  • 对应的脚本特性为backgroundPosition


来源:http://caibaojian.com/css3/properties/background/background-position.htm
2020-01-16 10:37 举报

关于挟翼

挟翼一款提供UI页面设计的软件。
您只需要动一动鼠标绘制相关的元素,软件会自动帮你完成CSS样式和HTML代码。
从现在开始注册,立即赠送一年VIP会员。活动结束日期待定。