The background-clip CSS property specifies whether an element’s
background,either the color or image,extends underneath its border.

而

The background-origin CSS property determines the background
positioning area,that is the position of the origin of an image
specified using the background-image CSS property.

> https://developer.mozilla.org/en-US/docs/CSS/background-clip
> https://developer.mozilla.org/en-US/docs/CSS/background-origin

这两个属性都有三个选项：border-Box,padding-Box和content-Box. background-origin属性确定背景放置在哪里(默认为padding-Box),而background-clip确定显示哪些背景的部分(默认为border-Box).属性可以一起使用或独立使用.

一些例子可能是有用的：

> Default(既不指定属性)

背景,起源

> Background-origin set to border-box – 注意背景图像如何稍微向上和向左移动,使其位置的起点位于div的边界(边框已透明以帮助可视化).
> Background-origin set to padding-box(默认) – 由于padding-Box值是默认值,因此应该与默认示例相同.
> Background-origin set to content-box – 注意背景图像如何稍微向右和向右移动,使其位置的原点是由div应用的填充确定的div的内容区域.

背景剪辑

> Background-clip set to border-box(默认) – 这里与默认示例没有区别,因为背景图像的起点是填充框(默认),背景剪辑设置为border-Box(默认).在这种情况下,图像不会被剪切,因为它适合边框.
> Background-clip set to padding-box – 与默认示例没有区别,背景剪辑设置为填充框.像上一个例子一样,因为它适合填充框.
> Background-clip set to content-box – 在这里您可以看到,当应用于div的填充创建一个小的内容区域时,背景被剪切.背景图像的起源仍然是填充框.

背景夹和背景源一起使用

> Background-clip set to padding-box and background-origin set to content-box(两个非默认值) – 在这里你可以看到图像的原点已被设置为content-Box,以便它被按下并从它的正常位置离开div的填充.然后背景剪辑已设置为填充框,以便图像不会显示在底部或右侧边框(如果它设置为边框).