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 July 2015.

摘要

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
# the-background-origin

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background-origin
border-box
content-box
padding-box

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Requires a vendor prefix or different name for use.
Has more compatibility info.

相关文献