--- title: background-origin slug: Web/CSS/background-origin translation_of: Web/CSS/background-origin ---
background-origin
规定了指定背景图片{{cssxref("background-image")}} 属性的原点位置的背景相对区域.
注意:当使用 {{Cssxref("background-attachment")}} 为fixed时,该属性将被忽略不起作用。
{{cssinfo}}
Formal syntax: {{csssyntax("background-origin")}}
background-origin: border-box background-origin: padding-box background-origin: content-box background-origin: inherit
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 |
---|---|---|
{{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}} | {{Spec2('CSS3 Backgrounds')}} |
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
.