--- title: background-origin slug: Web/CSS/background-origin translation_of: Web/CSS/background-origin ---
{{CSSRef}}

摘要

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

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

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

{{cssinfo}}

语法

Formal syntax: {{csssyntax("background-origin")}}
background-origin: border-box
background-origin: padding-box
background-origin: content-box

background-origin: inherit

属性值

border-box
背景图片的摆放以border区域为参考
padding-box
背景图片的摆放以padding区域为参考
content-box
背景图片的摆放以content区域为参考

形式化语法

How to read CSS syntax. {{csssyntax("background-origin")}}

例子

 .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
{{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}} {{Spec2('CSS3 Backgrounds')}}  

浏览器兼容性

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 [3] {{CompatGeckoDesktop("2.0")}} [1] 9.0 [2] 10.5 3.0 (522) [3]
content-box 1.0 [3] {{CompatGeckoDesktop("2.0")}} [1] 9.0 [2] {{CompatNo}} 3.0 (522) [3]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
content-box {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

[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.

相关文献