background-position-x

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

概要

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>

规范

Specification
CSS Backgrounds Module Level 4
# background-position-longhands

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background-position-x
Side-relative values (such as bottom 10%)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

更多