当前位置主页 > 资料库 > 前端教程 > CSS属性参考 | background-position

CSS属性参考 | background-position

2016-04-07

background-position属性用于指定背景图片的初始位置。这个位置是相对于background-origin属性指定的背景图层位置的位置。

background-position属性通过提供X和Y坐标的值来设置背景图像的初始位置。

注意,如果你在设置了background-position属性之后,再为元素设置简写方式的background属性,简写方式中又没有设置background-position属性,那么background-position属性的值会被重置为它的初始值。

如果你为元素设置了多个背景图像,可以为每个背景图像分别设置一个background-position属性,各个属性值之间使用逗号来分隔,每一个属性值和一张背景图片对应。

官方语法
background-position: <position> [ , <position> ]*                       
                            

参数:<position>是一到四个背景图像到元素边界2D距离的数值。这个数值可以是相对值,也可以是绝对值。注意:这个位置可以设置在盒模型之外。

<position>可以是百分比值,CSS长度值或偏移关键字top, left, bottom, rightcenter

它的具体取值可以是下面的任意一种:

  • <percentage> <percentage>:可以是一对百分比值。0% 0%表示背景图像的左上角位置位于盒模型padding box区域的左上角位置。100% 100%表示背景图片的左上角位于padding box区域的右下角位置。
  • <length> <length>:也可以是一对具体的CSS测量单位值。例如100px 200px表示背景图像位于padding box区域的左上角X方向向左偏移100像素,Y方向向下偏移200像素的位置。
  • top leftleft top:和0% 0%相同。
  • top,top centercenter top:和50% 0%相同。
  • right toptop right:和100% 0%相同。
  • left,left centercenter left:和0% 50%相同。
  • centercenter center:和50% 50%相同。
  • right,right centercenter right:和100% 50%相同。
  • bottom leftleft bottom:和0% 100%相同。
  • bottom,bottom centercenter bottom:和50% 100%相同。
  • bottom rightright bottom:和100% 100%相同。

如果只设置了一个值,那么这个值为水平位置的值,垂直位置的值为50%。

你可以混合使用百分比值,CSS长度值和关键字。位置的值可以是一个负数。

例如下面的示例代码都是有效的背景图片位置的CSS代码:

background-position: 20px; 
background-position: 20px 50px; 
background-position: 30% 75%;
background-position: top left; 
background-position: top 100px; 
background-position: -300px 45px;                               
                            

下面的示例代码为多个背景图片设置初始位置:

.element {
    background-image: url(image1.jpg), url(image2.jpg);
    background-position: top left, 50% 50%;
}                              
                            
适用范围

background-position属性可以使用在所有元素上。

在线演示

第一个例子设置背景图片的background-position属性为关键字:top center

第二个例子设置背景图片的background-position属性为百分比数:20% 75%

下载源代码

浏览器支持

所有的现代浏览器都支持background-position属性,包括:Chrome, Firefox, Safari, Opera, IE浏览器以及Android和iOS系统浏览器。

相关阅读
Previous:
上一篇:CSS属性参考 | background-origin
Next:
下一篇:CSS属性参考 | <length>

我要评论

返回顶部