background-position

  • 版本:CSS1/3
  • 2018.3.14

语法:

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

适用于:所有元素

继承性:无

动画性:是

计算值:指定值

媒 体:视觉

取值:

<percentage>
用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。
<length>
用长度值指定背景图像在元素中出现的位置。可以为负值。
center:
背景图像横向或纵向居中。
left:
背景图像从元素左边开始出现。
right:
背景图像从元素右边开始出现。
top:
背景图像从元素顶部开始出现。
bottom:
背景图像从元素底部开始出现。

说明:

指定背景图像在元素中出现的位置。
  • 该属性接受1~4个参数值。
  • 如果提供三或四个,每个 <percentage><length> 偏移量之前都必须跟着一个边界关键字(即left | right | top | bottom,不包括center),偏移量相对关键字位置进行偏移。

    示例:假设要定义背景图像在容器中右下方,并且距离右边和底部各有20px

    缩写方式:

    background: url(test1.jpg) no-repeat right 20px bottom 20px;
    你也可以设置3个参数值:

    拆分方式:

    background: url(test1.jpg) no-repeat left bottom 10px;

    要注意的是:设置3个或4个值,偏移量前必须有边界关键字。也就是说,形如:10px bottom 20px,这样的参数设置是错误的,因为10px前面没有关键字。

  • 如果提供两个,第一个用于横坐标,第二个用于纵坐标。
  • 如果只提供一个,该值将用于横坐标;纵坐标将默认为50%(即center)。
  • 对应的脚本特性为:backgroundPosition

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
  • 灰色 = 未知
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0+ 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
3~4个参数
Multiple background position
8.0
9.0+

示例:

关注编程学问公众号