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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

阿德明网络 2018-09-12 09:14:54 浏览1451
展开阅读全文

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;

注意:这个属性的值会被后面声明的属性覆盖掉,如backgroundbackground-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)

网友评论

登录后评论
0/500
评论
阿德明网络
+ 关注