Question

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

Answer 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（默认） - 这里与默认示例没有区别，因为背景图像的原点是填充框（默认），背景剪辑设置为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（两个非默认值） - 在这里你可以看到图像的原点已被设置为内容框，以便它被向下推并从div的填充处离开它的正常位置。然后将背景剪辑设置为填充框，以便图像不会显示在底部或右边框下（如果它设置为边框，则会显示）。

Answer 2

来自CSS3.info：

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

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

Answer 3

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

＆＃39;背景剪辑＆＃39;是背景是在框中，填充还是其他东西！

＆＃39;背景原点＆＃39;用于计算某个边框，填充或其他东西中某个背景的位置！

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-image添加到元素时   图像位置从我们元素中填充的左上角开始。   background-origin让你决定你想要的位置   背景位置起点，边框或填充或   内容。

background-origin的新属性有3个值   箱模型：

border-box - 定位背景位置0,0指向顶部   边界左边。 padding-box（默认） - 定位背景   位置0,0点位于填充的左上角。内容框 - 到   将背景位置0,0点放在左上角   内容。

<强>背景剪辑

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

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

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

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

Answer 6

我在这个主题上写了一篇文章，如果有人真的期待看到 background-clip ＆amp; background-origin 然后查看这篇文章。

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

Answer 7

简而言之-

background-origin：指定图像的来源

background-clip：指定绘画区域

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

7 个答案: