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 type | a repeatable list of |
语法
属性值
border-box
-
背景图片的摆放以 border 区域为参考
padding-box
-
背景图片的摆放以 padding 区域为参考
content-box
-
背景图片的摆放以 content 区域为参考
形式化语法
例子
.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 |
---|
CSS Backgrounds and Borders Module Level 3 # the-background-origin |
浏览器兼容性
BCD tables only load in the browser