CSS参考手册
背景和边框 | Backgrounds & Borders
背景位置-x | background-position-x
background-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 |
(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)
背景和边框 | Backgrounds & Borders相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。