MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

background-origin

这篇翻译不完整。请帮忙从英语翻译这篇文章

摘要

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

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

假如background简写中没有设置该值,那么在 background 简写值后指定background-origin,那么后面的值就会覆盖简写值,其实说白了,就是后出现的值会覆盖前面的值。

初始值padding-box
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

Formal syntax: <box>#

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

background-origin: border-box
background-origin: padding-box
background-origin: content-box

background-origin: inherit

属性值

border-box
背景将会延伸到延伸到外边界的边框,而且是「边框在上、背景在下」,这个用border-style 为dashed可以直接看得出来。
padding-box
背景描绘在padding盒子,边框里不会有背景出现。同样,背景将会延伸到最外边界的padding.
content-box
背景描绘在内容区范围.

形式化语法

How to read CSS syntax.
<box>#

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

例子

 .example {
   border: 10px double;
   padding: 10px;
   background: url('image.jpg');
   background-position: center left;
   /* 背景将在内容区padding内部填充 */ 
   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');
  background-position: top right, 0px 0px;
  background-origin: content-box, padding-box;
}

规范

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
background-origin
Candidate Recommendation  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 10.5 3.0 (522) [3]
content-box 1.0 [3] 4.0 (2.0) [1] 9.0 [2] 未实现 3.0 (522) [3]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?
content-box ? ? ? ? ?

[1] Gecko supported, from version 1.1 to version 1.9.2, which corresponds to Firefox 1.0 to 3.6 included, a different, and prefixed, syntax: -moz-background-origin: padding | border.

[2] Internet Explorer up to version 7 behaves as if there was a background-origin: border-box; Internet Explorer 8 behaves as if it were background-origin: padding-box; which is the regular default value.

[3] Webkit also supports the prefixed version of this proprietary, and in that case, in addition to the current keywords, the alternative synonyms: padding, border, and content.

[4] Konqueror 3.5.4 supports -khtml-background-origin.

相关文章

文档标签和贡献者

 此页面的贡献者: ChenYuHsin, soyaine, fscholz, Sebastianz, FredWe, xiaoho
 最后编辑者: ChenYuHsin,