background-origin - CSS（层叠样式表） 编辑

摘要

 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 type	discrete
正规顺序	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区域为参考

padding-box

背景图片的摆放以padding区域为参考

content-box

背景图片的摆放以content区域为参考

形式化语法

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

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

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.

相关文献

• 【CSS3】background-origin和background-clip的区别