背景位置-x | background-position-x
background-position-x
background-position-xCSS 属性设置水平方向的位置，与每个背景图片等位置层设置属性 background-origin相关。更多信息请查看background-position属性，这个用的比较普遍。
/* 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;
注意：这个属性的值会被后面声明的属性覆盖掉，如background和background-position等简写的属性。
| 初始值 | left |
|---|---|
| 适用元素 | all elements |
| 是否是继承属性 | no |
| Percentages | refer to width of background positioning area minus height of background image |
| 适用媒体 | visual |
| 计算值 | A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword |
| Animation type | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
值
left在位置层上相对于左边的位置。center在位置层上相对于中间点的位置。right在位置层上相对于右边的位置。<length><length>值是定义相对于位置层边缘的距离，边缘默认为左边。<percentage><percentage>值是定义相对于位置层边缘的距离百分比，边缘默认为左边。
正式语法
[ center | [ left | right | x-start | x-end ]? <length-percentage>? ]#where
<length-percentage> = <length> | <percentage>
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 4The definition of 'background-position-x' in that specification. | Editor's Draft | Initial specification of longhand sub properties of background-position to match longstanding implementations. |
浏览器兼容性
| Feature | Chrome | Firefox | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic Support | (Yes) | 49.0 | 12 | 6 | (Yes) | (Yes) |
| Two-value syntax (support for offsets from any edge) | (No) | 49.0 | 12 | 9.0 | (No) | (No) |
| Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| Basic Support | (Yes) | (Yes) | (Yes) | 49.0 | ? | ? | ? |
| Two-value syntax (support for offsets from any edge) | (No) | (No) | (Yes) | 49.0 | ? | (No) | (No) |
另见
background-position
background-position-y
background-position-inline
background-position-block
- 多重背景（Multiple backgrounds）
