background-origin
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
摘要
background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域。
注意：当使用 background-attachment 为 fixed 时，该属性将被忽略不起作用。
备注：假如background简写中没有设置该值，那么在 background 简写值后指定 background-origin，那么后面的值就会覆盖简写值，其实说白了，就是后出现的值会覆盖前面的值。
语法
css
/* 关键字值 */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
/* 全局值 */
background-origin: inherit;
background-origin: initial;
background-origin: revert;
background-origin: revert-layer;
background-origin: unset;
属性值
border-box-
背景图片的摆放以 border 区域为参考
padding-box-
背景图片的摆放以 padding 区域为参考
content-box-
背景图片的摆放以 content 区域为参考
形式语法
| 初始值 | padding-box |
|---|---|
| 适用元素 | 所有元素. It also applies to ::first-letter and ::first-line. |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| 动画类型 | a repeatable list |
形式定义
background-origin =
<visual-box>#
<visual-box> =
content-box |
padding-box |
border-box
示例
css
.example {
border: 10px double;
padding: 10px;
background: url("image.jpg");
background-position: center left;
/* 背景将在内容区 padding 内部填充 */
background-origin: content-box;
}
css
#example2 {
border: 4px solid black;
padding: 10px;
background: url("image.gif");
background-repeat: no-repeat;
background-origin: border-box;
}
css
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 # background-origin |
浏览器兼容性
Loading…