CSS中的background-position属性允许您在其容器内移动背景图像(或渐变)。
html {
background-position: 100px 5px;
}
它有三种不同类型的值:
- 长度值(例如100px 5px)
- 百分比(例如100% 5%)
- 关键字(例如top right)
默认值为0 0,这会将背景图像放在容器的左上角。
长度值非常简单:第一个值是水平位置,第二个值是垂直位置。因此100px 5px会将图像向右移动100px,向下移动5个像素。
百分比的工作方式略有不同。将背景图像移动X%表示它会将图像中的X%点与容器中的X%点对齐。例如,50%表示它将图像的中间与容器的中间对齐。100%意味着它将图像的最后一个像素与容器的最后一个像素对齐,依此类推。
关键字只是百分比的快捷方式。top right比100% 0更容易记住表示右上角。以下是所有五个关键字及其等效值的列表:
- top:垂直0%
- right:水平100%
- bottom:垂直100%
- left:水平0%
- center:用在水平方向则水平50%。如果垂直方向,则垂直水平50%。
声明值
在现代浏览器中,最多可以为背景位置提供四个值(IE9以下不支持三个值和四个值)。
如果声明一个值,则该值为水平偏移量。浏览器将垂直偏移设置为center。
声明两个值时,第一个值是水平偏移量,第二个值是垂直偏移量。
当你开始使用三个或四个值时,情况会变得更复杂一些,但是你也可以更好地控制你的背景位置。
当您指定三个值时,浏览器将“缺失”的第四个值插入为0:
#threevalues {
background-position: right 45px bottom;
}
这将背景图像从右侧定位45px,从容器底部定位0px。
这是background-position四个值的例子:
#fourvalues {
background-position: right 45px bottom 20px;
}
这个将背景图像放置在右侧45px,放置在容器底部20px。
注意上面示例中值的顺序:关键字后跟长度单位。三个或四个值必须遵循该格式,并且关键字在长度或百分比单位之前。