DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!
CSS 中的 background-position
属性允许您在容器内移动背景图像(或渐变)。
html {
background-position: 100px 5px;
}
它有三种不同的值类型
- 长度值(例如
100px 5px
) - 百分比(例如
100% 5%
) - 关键字(例如
top right
)
默认值为 0 0
。 这将您的背景图像放置在容器的左上角。
长度值很简单:第一个值是水平位置,第二个值是垂直位置。 所以 100px 5px
会将图像向右移动 100 像素,向下移动 5 像素。 您可以使用 px
、em
或任何其他 CSS 长度值 设置长度值。
百分比的工作方式略有不同。 戴上您的数学帽:将背景图像移动 X% 意味着它将对齐图像中 X% 的点到容器中 X% 的点。 例如,50%
表示它将对齐图像的中间与容器的中间。 100%
表示它将对齐图像的最后一个像素与容器的最后一个像素,等等。
关键字只是百分比的快捷方式。 记住和写 top right
比 0 100%
更容易,这就是关键字存在的意义。 以下是所有五个关键字及其等效值的列表
top
:垂直 0%right
:水平 100%bottom
:垂直 100%left
:水平 0%center
:如果水平方向尚未定义,则水平方向为 50%。 如果定义了水平方向,则应用于垂直方向。
有趣的是,您使用关键字的顺序无关紧要:top center
与 center 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,它包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
25 | 13 | 9 | 12 | 7 |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 4.4 | 7.0-7.1 |
这与 background-position-x
和 background-position-y
属性的支持级别相同。
更多信息
相关
背景
.element { background: url(texture.svg) top center / 200px 200px no-repeat fixed #f8a100; }
background-attachment
.hero { background-attachment: fixed; }
background-blend-mode
.element { background-blend-mode: screen; }
background-clip
.element { background-clip: padding-box; }
background-color
element{ background-color: #ff7a18; }
background-image
.element { background: url(texture.svg); }
background-origin
.element { background-origin: border-box; }
背景位置
.element { background-position: 100px 5px; }
background-repeat
.element { background-repeat: repeat-x; }
background-size
.element { background-size: 300px 100px; }
非常感谢你。你让我的一天都变得美好!
如果我想将图片居中靠右,并留出大约 20 像素的右外边距,该怎么办?
我该如何实现?
‘left 50% 20px’ 怎么样?
这对我有效
background-position: right 20px top 50%;
20px 50%
使用或不使用关键词与百分比有什么最佳实践吗?
有人能向我解释一下吗?
当我使用纯像素值(如 10px 20px)时,它工作正常,图片实际上会在容器内移动,但是当我使用百分比值(如 50% 20%)时,图片不会在容器内移动,同样的现象也会发生在当我使用四个值(如 right 30px left 35px)时,以及当我使用 top right(实际上它向我展示了图像的右上角部分)时。
任何帮助将不胜感激。
12
你可以使用负整数
为什么 Safari 浏览器不支持“background-position: right 8px top 14px;”
注意:从 Chrome 66 版本开始,由于解析歧义,三部分语法背景位置已被弃用……请查看这里和[这里] (https://drafts.csswg.org/css-values-4/#ref-for-propdef-background-position%E2%91%A0)。所以如果我理解正确:
background-position: right 45px bottom;
将需要更改为background-position: right 45px bottom 0;
我可以使用负百分比吗?例如 background-position-y: -20%
这是推荐做法吗?或者还有其他替代方案?请建议
如果设置
background-size: 200% 200%
,那么背景位置值会翻倍吗?