background-position-x

**background-position-x** CSS 属性设置每个背景图像的初始水平位置。该位置相对于 background-origin 设置的位置层。

试一试

此属性的值会被应用于元素之后任何 background 或 background-position 简写属性的声明覆盖。

语法

css
/* Keyword values */
background-position-x: left;
background-position-x: center;
background-position-x: right;

/* <percentage> values */
background-position-x: 25%;

/* <length> values */
background-position-x: 0px;
background-position-x: 1cm;
background-position-x: 8em;

/* Side-relative values */
background-position-x: right 3px;
background-position-x: left 25%;

/* Multiple values */
background-position-x: 0px, center;

/* Global values */
background-position-x: inherit;
background-position-x: initial;
background-position-x: revert;
background-position-x: revert-layer;
background-position-x: unset;

background-position-x 属性指定为一个或多个值，用逗号分隔。

值

left

将背景图像的左边缘与背景位置层的左边缘对齐。

center

将背景图像的中心与背景位置层的中心对齐。

将背景图像的右边缘与背景位置层的右边缘对齐。

<length>

给定背景图像的左垂直边缘相对于背景位置层的左垂直边缘的偏移量。（某些浏览器允许为偏移量分配右边缘）。

<percentage>

给定背景图像的水平位置相对于容器的偏移量。值 0% 表示背景图像的左边缘与容器的左边缘对齐，值 100% 表示背景图像的*右*边缘与容器的*右*边缘对齐，因此值 50% 水平居中背景图像。

正式定义

初始值0%
应用于所有元素。它也适用于 ::first-letter 和 ::first-line。
继承否
百分比指背景定位区域的宽度减去背景图像的宽度
计算值一个列表，每个项目由以下内容组成：作为绝对长度和百分比组合给出的偏移量，加上一个原点关键字
动画类型可重复列表

正式语法

background-position-x = 
  [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#  

<length-percentage> = 
  <length>      |
  <percentage>

示例

基本示例

以下示例显示了一个简单的背景图像实现，使用 background-position-x 和 background-position-y 分别定义图像的水平和垂直位置。

HTML

html
<div></div>

CSS

css
div {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom;
}

结果

相对于侧面的值

以下示例演示了对侧向偏移语法的支持，该语法允许开发者从任意边缘偏移背景。

HTML

html
<div></div>

CSS

css
div {
  width: 300px;
  height: 300px;
  background-color: seagreen;
  background-image: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: right 20px;
  background-position-y: bottom 10px;
}

结果

规范

规范
CSS 背景和边框模块第 4 级
# background-position-longhands

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅