background-origin

**background-origin** CSS 属性设置背景的原点：从边框开始、边框内部或填充内部。

试一试

请注意，当 background-attachment 为 fixed 时，background-origin 将被忽略。

语法

css

/* Keyword values */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* Global values */
background-origin: inherit;
background-origin: initial;
background-origin: revert;
background-origin: revert-layer;
background-origin: unset;

background-origin 属性指定为以下列出的关键字值之一。

值

border-box: 背景相对于边框框定位。
padding-box: 背景相对于填充框定位。
content-box: 背景相对于内容框定位。

正式定义

初始值	`padding-box`
应用于	所有元素。它也适用于 `::first-letter` 和 `::first-line`。
继承	否
计算值	按指定
动画类型	可重复列表

正式语法

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;
  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"); /* Applies two images to the background */
  background-position:
    top right,
    0px 0px;
  background-origin: content-box, padding-box;
}

使用两个渐变

在这个例子中，盒子有一个粗的点状边框。第一个渐变使用 padding-box 作为 background-origin，因此背景位于边框内部。第二个使用 content-box，因此仅在内容后面显示。

css

.box {
  margin: 10px 0;
  color: #fff;
  background: linear-gradient(
      90deg,
      rgb(131 58 180 / 100%) 0%,
      rgb(253 29 29 / 60%) 60%,
      rgb(252 176 69 / 100%) 100%
    ),
    radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(0 0 0 / 100%) 28%);
  border: 20px dashed black;
  padding: 20px;
  width: 400px;
  background-origin: padding-box, content-box;
  background-repeat: no-repeat;
}

html

<div class="box">Hello!</div>

规范

规范
CSS 背景和边框模块 Level 3 # the-background-origin

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

background-clip