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

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

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

阿德明网络 2018-09-12 09:15:24 浏览581
展开阅读全文

background-position-y 属性用于设置初始状态时背景图片在垂直方向上的位置,这个位置相对于通过 background-origin定义的背景层的原点进行定位. 需要获得更多的信息可以查看background-position属性,这个属性已经得到了长久且广泛的支持.

注意:background-position-y 设定的值会被 background或者是background-position的简写属性的background-position-x后面的值所覆盖.

/* Keyword values */
background-position-y: top;
background-position-y: center;
background-position-y: bottom;

/* <percentage> values */
background-position-y: 25%;

/* <length> values */
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;

/* side-relative values */
background-position-y: bottom 3px;
background-position-y: bottom 10%;

/* Multiple values */
background-position-y: 0px, center;

/* Global values */
background-position-y: inherit;
background-position-y: initial;
background-position-y: unset;

初始值

top

适用元素

all elements

是否是继承属性

no

Percentages

refer to height 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

语法

top将背景图片的上边界与背景位置层的上边界对齐.

center将背景图片垂直方向上的中线与背景位置层的垂直方向中线对齐.bottom将背景图片的下边界与背景位置层的下边界对齐.

<length> 通过<length>直接设定具体的数值,该数值定义了背景图片垂直方向的上边界相对于当前背景层(content-box/padding-box/border-box)的垂直方向上边界的偏移量,默认情况下是padding-box.

<percentage>通过<percentage>百分比的设置,该百分比定义了背景图片垂直方向的上边界相对于当前背景层的垂直方向上边界的偏移百分比,从而得到偏移量,该偏移量的计算方法是:(当前背景层的高-背景图片的高) * 百分比,高度差和百分比都保留符号。

正式语法

[ center | [ top | bottom | y-start | y-end ]? <length-percentage>? ]#where 
<length-percentage> = <length> | <percentage>

规范

Specification

Status

Comment

CSS Backgrounds and Borders Module Level 4The definition of 'background-position-y' in that specification.

Editor's Draft

Initial specification of longhand subproperties 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-x
  • 多重背景(Multiple backgrounds)

网友评论

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