CSS-背景位置-x | background-position-x

ackground-position-x

CSS 屬性設定水準方向的位置，與每個背景圖檔等位置層設定屬性 

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
Two-value syntax (support for offsets from any edge)	(No)			9.0

	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
					?

另見

• background-position

• background-position-y

• background-position-inline

• background-position-block

• 多重背景（Multiple backgrounds）