html - background-clip 和 background-origin 之间有什么区别吗？

Question

CSS3 声明 background-clip 和 background-origin 似乎对背景有相同的效果。它们似乎都将背景限制在相对于 HTML 元素的某个区域，所以我想知道这两个声明在功能上是否真的存在差异。

Answer 1

根据 MDN:

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-盒子)。这些属性可以一起使用，也可以单独使用。

一些例子可能有用:

• Default (均未指定属性)

背景来源

• Background-origin set to border-box - 请注意背景图像如何稍微向上和向左移动，使其位置原点位于 div 的边框下方(边框已设为透明以帮助形象化)。
• Background-origin set to padding-box (default) - 由于 padding-box 值是默认值，这应该与默认示例相同。
• Background-origin set to content-box - 请注意背景图像是如何稍微向下和向右移动的，以便其位置的原点是 div 的内容区域，这由应用于 div 的填充决定。

背景剪辑

• Background-clip set to border-box (默认)- 这里与默认示例没有区别，因为背景图像的原点是填充框(默认)并且背景剪辑设置为边框框(默认)。在这种情况下，图像不会被剪裁，因为它适合边框。
• Background-clip set to padding-box - 这里与默认示例没有区别，因为背景图像的原点是填充框(默认)并且背景剪辑设置为填充框。与前面的示例一样，图像未被剪裁，因为它适合填充框。
• Background-clip set to content-box - 在这里您可以看到背景被剪裁，因为应用于 div 的填充创建了一个小的内容区域。背景图片的来源仍然是padding-box。

background-clip 和 background-origin 一起使用

• Background-clip set to padding-box and background-origin set to content-box (均为非默认值)- 此处您可以看到图像的原点已设置为内容框，因此它被 div 的填充从其正常位置向下和向左推。然后将 background-clip 设置为 padding-box，这样图像就不会显示在底部或右边框下方(如果设置为 border-box 就会显示)。