html - 背景剪辑和背景来源之间有什么区别吗？

Question

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

Answer 1

根据 MDN：

background-clip CSS 属性指定元素的背景（颜色或图像）是否延伸到其边框下方。

尽管

background-origin CSS 属性确定背景定位区域，即使用 background-image 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(default) - 由于该padding-box值是默认值，因此应该与默认示例相同。
• 背景原点设置为content-box- 请注意背景图像是如何稍微向下和向右移动的，以便其位置的原点是 div 的内容区域，这由应用于 div 的填充确定。

背景剪辑

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

background-clip 和 background-origin 一起使用

• Background-clip 设置为padding-box和 background-origin 设置为content-box（均为非默认值） - 在这里您可以看到图像的原点已设置为 content-box，因此它被 div 的填充从正常位置向下和向左推. 然后将背景剪辑设置为填充框，以便图像不会显示在底部或右侧边框下方（如果设置为边框框则会显示）。

Answer 2

来自CSS3.info：

background-origin 属性用于确定如何计算某个框内背景的背景位置。

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

Answer 3

阅读：http ://www.css3.info/preview/background-origin-and-background-clip/

'background-clip' 是背景是否在一个盒子、填充或其他东西中！

'background-origin' 用于计算某个背景在某个边框、填充或其他东西中的位置！

Answer 4

该矩阵演示了差异以及两者何时有效：

http://codepen.io/anon/pen/RNVKvj

HTML

<h3>Image size default - origin has no impact</h3>
<div class="box box4" > <span>clip:border<br>
  origin:any</span> </div>
<div class="box box1"> <span>clip:padding<br>
  origin:any</span> </div>
<div class="box box7"  > <span>clip:content<br>
  origin:any</span> </div>
<br clear="all"/>
<h3>Image position top, left</h3>
<div class="positioned">
  <div class="box box4"> <span>clip:border<br>
    origin:border</span> </div>
  <div class="box box5"> <span>clip:border<br>
    origin:padding</span> </div>
  <div class="box box6"> <span>clip:border<br>
    origin:content</span> </div>


  <div class="box box1" style="clear:both;"> <span>clip:padding<br>
    origin:border</span> </div>
  <div class="box box2"> <span>clip:padding<br>
    origin:padding</span> </div>
  <div class="box box3"> <span>clip:padding<br>
    origin:content</span> </div>


  <div class="box box7" style="clear:both;"> <span>clip:content<br>
    origin:border</span> </div>
  <div class="box box8"> <span>clip:content<br>
    origin:padding</span> </div>
  <div class="box box9"> <span>clip:content<br>
    origin:content</span> </div>
</div>
<br clear="all"/>

<h3>Image size "contained"</h3>
<div class="contain">

  <div class="box box4"> <span>clip:border<br>
    origin:border</span> </div>
  <div class="box box5"> <span>clip:border<br>
    origin:padding</span> </div>
  <div class="box box6"> <span>clip:border<br>
    origin:content</span> </div>


  <div class="box box1" style="clear:both;"> <span>clip:padding<br>
    origin:border</span> </div>
  <div class="box box2"> <span>clip:padding<br>
    origin:padding</span> </div>
  <div class="box box3"> <span>clip:padding<br>
    origin:content</span> </div>


  <div class="box box7" style="clear:both;"> <span>clip:content<br>
    origin:border</span> </div>
  <div class="box box8"> <span>clip:content<br>
    origin:padding</span> </div>
  <div class="box box9"> <span>clip:content<br>
    origin:content</span> </div>
</div>

CSS

.box{ background:url(http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat center center;  
  width:300px;
  height:300px;  
  border:solid 25px rgba(0,0,0,0.5);  
  padding:25px;
  float:left;
  margin-right:5px; margin-bottom:5px;
  box-sizing:border-box;

}
.contain .box{  
  background-size: contain;
}
.positioned .box{  
  background-position:top left;
}
.box span{color:#fff; text-align:center; display:block; font-size:20px; font-weight:bold; height:100%; background-color:rgba(256,256,256,0.5);}

.box1{
  background-clip:padding-box;
  background-origin:border-box;
}

.box2{
  background-clip:padding-box;
  background-origin:padding-box;
}

.box3{
  background-clip:padding-box;
  background-origin:content-box;
}

.box4{
  background-clip:border-box;
  background-origin:border-box;
}

.box5{
  background-clip:border-box;
  background-origin:padding-box;
}

.box6{
  background-clip:border-box;
  background-origin:content-box;
}

.box7{
  background-clip:content-box;
  background-origin:border-box;
}

.box8{
  background-clip:content-box;
  background-origin:padding-box;
}

.box9{
  background-clip:content-box;
  background-origin:content-box;
}

Answer 5

背景来源

在此属性之前，当我们将背景图像添加到元素时，图像位置从元素中填充的左上角开始。background-origin 让你决定你希望背景位置的起点在哪里，边框或填充或内容。

根据 box-model， background-origin 的新属性有 3 个值：

border-box - 将背景位置 0,0 点定位在边框的左上角。padding-box（默认） - 将背景位置 0,0 点定位在填充的左上角。content-box - 将背景位置 0,0 点定位在内容的左上角。

背景剪辑

使用 background-clip 我们可以决定在哪里剪切背景图像，它与前面提到的背景原点值相同。

background-clip 的新属性有 3 个值：

边框框（默认） - 显示完整图像，不剪切任何东西。padding-box - 剪切边框背景图像。内容框 - 剪切边框和填充背景图像。

取自链接：
https ://coderwall.com/p/h7dwaq/say-hello-to-background-origin-and-background-clip-css3-new-features

Answer 6

我写了一篇关于这个主题的文章，如果有人真的很期待看到background-clip和background-origin之间的区别，那么请查看这篇文章。

链接： https ://medium.com/@AmJustSam/whats-the-difference-between-background-clip-vs-background-origin-b9a43b4a973

Answer 7

简而言之 -

background-origin : 指定图像的原点

background-clip : 指定绘画区域