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

【问题标题】：Is there any difference between background-clip and background-origin?背景剪辑和背景来源之间有什么区别吗？
【发布时间】：2012-10-05 20:55:17
【问题描述】：

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

【问题讨论】：

标签： html css background

【解决方案1】：

根据 MDN：

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

同时

background-origin CSS 属性确定背景定位区域，即图像原点的位置使用 background-image CSS 属性指定。

这两个属性都有三个选项：border-box、padding-box 和 content-box。 background-origin 属性确定背景的放置位置（默认为填充框），而background-clip 确定显示背景的哪个部分（默认为边框框）。这些属性可以一起使用，也可以单独使用。

一些例子可能有用：

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（默认） - 这里与默认示例没有区别，因为背景图像的原点是填充框（默认）并且背景剪辑设置为边框框（默认）。在这种情况下，图像不会被剪裁，因为它适合边框框。
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 的填充将其从正常位置向下和向左推。然后将 background-clip 设置为 padding-box，这样图像就不会显示在底部或右侧边框下方（如果设置为边框框则会显示）。

【讨论】：

虽然我不能与直接引用争论，但他们本身并没有完全回答这个问题。用您自己的话来说，您能否详细说明这些属性的对比？
@chharvey - 怎么样？

【解决方案2】：

来自CSS3.info：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案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;
}

【讨论】：

@j08691 仍然为我加载。 20 个方格，里面有一位可爱的女士。
嗯，也许是今天早些时候。
没问题，互联网有时会丢失。如果你好奇，那位女士就是 Lenna：en.wikipedia.org/wiki/Lenna
这是一个非常好的答案。谢谢！

【解决方案5】：

背景来源

在这个属性之前，当我们给元素添加背景图片时图像位置从我们元素中填充的左上角开始。 background-origin 让你决定你想要的 background-position 起始点为，border 或 padding 或内容。

background-origin 的新属性有 3 个值，根据盒子模型：

border-box - 将背景位置 0,0 点定位在顶部边界的左边。 padding-box(default) - 定位背景位置 0,0 点位于填充的左上角。内容框 - 到定位背景位置 0,0 点在左上角内容。

背景剪辑

使用背景剪辑我们可以决定在哪里剪切背景图像和前面提到的背景原点值一样 .

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

border-box(default) - 显示完整图像，不剪切任何东西。 padding-box - 剪切边框背景图像。内容框 - 剪切边框和填充背景图像。

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

简而言之-

background-origin : 指定图片来源

背景剪辑：指定绘画区域

【讨论】：