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.
是否是继承属性
计算值as specified
Animation typediscrete

语法

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  

浏览器兼容性

BCD tables only load in the browser

相关文献