背景位置

Avatar of Chris Coyier
Chris Coyier 发布

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!

CSS 中的 background-position 属性允许您在容器内移动背景图像(或渐变)。

html {
  background-position: 100px 5px; 
}

它有三种不同的值类型

  • 长度值(例如 100px 5px
  • 百分比(例如 100% 5%
  • 关键字(例如 top right

默认值为 0 0。 这将您的背景图像放置在容器的左上角。

长度值很简单:第一个值是水平位置,第二个值是垂直位置。 所以 100px 5px 会将图像向右移动 100 像素,向下移动 5 像素。 您可以使用 pxem 或任何其他 CSS 长度值 设置长度值。

百分比的工作方式略有不同。 戴上您的数学帽:将背景图像移动 X% 意味着它将对齐图像中 X% 的点到容器中 X% 的点。 例如,50% 表示它将对齐图像的中间与容器的中间。 100% 表示它将对齐图像的最后一个像素与容器的最后一个像素,等等。

关键字只是百分比的快捷方式。 记住和写 top right0 100% 更容易,这就是关键字存在的意义。 以下是所有五个关键字及其等效值的列表

  • top:垂直 0%
  • right:水平 100%
  • bottom:垂直 100%
  • left:水平 0%
  • center:如果水平方向尚未定义,则水平方向为 50%。 如果定义了水平方向,则应用于垂直方向。

有趣的是,您使用关键字的顺序无关紧要:top centercenter top 相同。 但是,只有在使用关键字的情况下才能执行此操作。 center 10%10% center 不一样。

演示

此演示显示了使用长度单位、百分比和关键字设置 background-position 的示例。

声明值

您可以在现代浏览器中为 background-position 提供最多四个值

  • 如果您声明一个值,则该值是水平偏移量。 浏览器将垂直偏移量设置为 center
  • 当您声明两个值时,第一个值是水平偏移量,第二个值是垂直偏移量。

当您开始使用三个或四个值时,事情会变得有点复杂,但您也会对背景放置有更多控制。 三个或四个值的语法在关键字和长度或百分比单位之间交替。 您可以在三个或四个值的 background-position 声明中使用center以外的任何关键字值。

当您指定三个值时,浏览器将“缺失”的第四个值解释为 0。 以下是一个三个值的 background-position 示例

.three-values {
  background-position: right 45px bottom;
}

这将背景图像定位在容器右侧 45px 处,容器底部 0px 处。

以下是一个四个值background-position 的示例

.four-values {
  background-position: right 45px bottom 20px;
}

这将背景图像放置在容器右侧 45px 处,容器底部 20px 处。

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

演示

此演示包括一个值、两个值、三个值和四个值 background-position 的示例。

浏览器支持

基本值在任何地方都受支持。 四值语法具有此支持

这些浏览器支持数据来自 Caniuse,它包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
25139127

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
1271274.47.0-7.1

这与 background-position-xbackground-position-y 属性的支持级别相同。

更多信息