背景来源 | background-origin
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
