CSS-背景来源 | background-origin
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-attachment是fixed...
注意：当使用 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也支持此属性的前缀版本，在这种情况下，除了目前的关键字，替代同义词有：padding，border，和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
