background-position-x
Baseline 广泛可用 *
background-position-x CSS 属性设置每个背景图像的初始水平位置。该位置相对于由 background-origin 设置的位置层。
试一试
background-position-x: left;
background-position-x: center;
background-position-x: 25%;
background-position-x: 2rem;
background-position-x: right 32px;
<section class="display-block" id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#example-element {
background-color: navajowhite;
background-image: url("/shared-assets/images/examples/star.png");
background-repeat: no-repeat;
height: 100%;
}
此属性的值将被在它之后应用于元素的 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-
将背景图像的中心与背景位置层的中心对齐。
right-
将背景图像的右边缘与背景位置层的右边缘对齐。
<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;
}
结果
与边相关的数值
以下示例显示了对与边相关的偏移语法 (side-relative offset syntax) 的支持，该语法允许开发人员将背景从任何边缘偏移。
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 |
浏览器兼容性
加载中…