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

阿德明網路發表於2018-09-12
CSS

ackground-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
  • 多重背景（Multiple backgrounds）


相關文章