CSS-背景来源 | background-origin

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

CSS-背景来源 | background-origin

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

background-origin 规定了指定背景图片background-image属性的原点位置的背景相对区域.

/* Keyword values */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* Global values */
background-origin: inherit;
background-origin: initial;
background-origin: unset;

请注意background-origin被忽略时background-attachmentfixed...

注意:当使用 background-attachment为fixed时,该属性将被忽略不起作用。

初始值

padding-box

适用元素

all elements. It also applies to ::first-letter and ::first-line.

是否是继承属性

no

适用媒体

visual

计算值

as specified

Animation type

discrete

正规顺序

the unique non-ambiguous order defined by the formal grammar

语法

background-origin属性被指定为下面列出的关键字值之一。

border-box背景是相对于边框的位置。padding-box背景是相对于填充框定位的。content-box背景是相对于内容框定位的。

正式语法

<box>#where 
<box> = border-box | padding-box | content-box

示例

.example {
  border: 10px double;
  padding: 10px;
  background: url('image.jpg');
  background-position: center left;
  background-origin: content-box;
}
#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url('image.gif');
  background-repeat: no-repeat;
  background-origin: border-box;
}
div {
  background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */
  background-position: top right, 0px 0px;
  background-origin: content-box, padding-box;
}

规范

Specification

Status

Comment

CSS Backgrounds and Borders Module Level 3The definition of 'background-origin' in that specification.

Candidate Recommendation

Initial definition.

浏览器兼容性

Feature

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Basic Support

1.01

12

4.02 3

9.04

10.5

3.01

content-box

1.0

12

4.02

9.05

10.5

3.01

Feature

Android

Chrome for Android

Edge mobile

Firefox for Android

IE mobile

Opera Android

iOS Safari

Basic Support

4.1

(Yes)

(Yes)

14.0

7.1

12.1

(Yes)

content-box

4.1

(Yes)

(Yes)

14.0

7.1

12.1

(Yes)

1. Webkit也支持此属性的前缀版本,在这种情况下,除了目前的关键字,替代同义词有:paddingborder,和content

2. Gecko从1.1版到1.9.2版,对应于Firefox 1.0到3.6,都支持一个不同的前缀语法:-moz-background-clip: padding | border

3. 从Firefox 49版本以后,也支持该属性的-webkit前缀版本。

4. 在IE 7及以前,Internet Explorer的行为就像background-origin: border-box被设置了一样。在Internet Explorer 8中,就像常规默认值background-origin: padding-box被设置了一样。

5. 在IE 7和IE 9中,它总是表现得像background-clip: padding如果设置为overflow: hidden | auto | scroll

网友评论

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