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

Question

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

Answer 1

根据MDN:

在背景剪辑 CSS属性指定一个元素的背景下,无论是颜色或图像是否延长其边框的下方.

而

的背景来源的 CSS属性确定背景定位区域,即图像的原点的位置使用背景图像CSS属性指定.

• 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属性确定背景的放置位置(默认为填充框),同时background-clip确定显示背景的哪个部分(默认为边框).这些属性可以一起使用或独立使用.

一些示例可能有用:

• 默认(未指定属性)

背景,起源

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

背景剪辑

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

背景剪辑和背景原点一起使用

• 背景剪辑设置为padding-box和背景 - 原点设置为content-box(两个非默认值) - 在这里你可以看到图像的原点已被设置为内容框,以便它被向下推,并通过div的填充从它的正常位置离开.然后将背景剪辑设置为填充框,以便图像不会显示在底部或右边框下(如果它设置为边框,则会显示).

Answer 2

从CSS3.info：

background-origin属性用于确定特定盒子中背景的背景位置如何计算。

background-clip属性用于确定背景是否延伸到边框中。