此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

background-position-x

基线 广泛可用 *

自 2016年9月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

* 此特性的某些部分的支持程度可能有所不同。

background-position-x CSS 属性设置水平方向的位置,与每个背景图片等位置层设置属性 background-origin相关。更多信息请查看background-position属性,这个用的比较普遍。

备注:这个属性的值会被后面声明的属性覆盖掉,如backgroundbackground-position等简写的属性。

初始值0%
适用元素所有元素. It also applies to ::first-letter and ::first-line.
是否是继承属性
Percentagesrefer to width of background positioning area minus width of background image
计算值A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
动画类型a repeatable list

语法

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: unset;

left

在位置层上相对于左边的位置。

center

在位置层上相对于中间点的位置。

在位置层上相对于右边的位置。

<length>

<length>值是定义相对于位置层边缘的距离,边缘默认为左边。

<percentage>

<percentage>值是定义相对于位置层边缘的距离百分比,边缘默认为左边。

正规语法

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

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

规范

规范
CSS Backgrounds Module Level 4
# background-position-longhands

浏览器兼容性

更多