CSS中背景属性background-position

2019-03-22239次阅读css

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。

注意上面示例中值的顺序:关键字后跟长度单位。三个或四个值必须遵循该格式,并且关键字在长度或百分比单位之前。

上一篇: css3中背景属性background-size  下一篇: CSS3中背景属性background-origin  

CSS中背景属性background-position相关文章