根据MDN：

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

当

background-originCSS属性确定背景定位区域，即使用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确定显示背景的哪个部分（默认为边框）。这些属性可以一起使用，也可以单独使用。
一些例子可能有用：

• 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设置为border-box（默认）。在这种情况下，图像不会被裁剪，因为它适合border-box。
• Background-clip set to padding-box-这里与默认示例没有区别，因为背景图像的原点是padding box（默认），background-clip设置为padding-box。像上一个示例一样，图像没有被裁剪，因为它适合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的padding从它的正常位置向左下推了。然后background-clip被设置为padding-box，这样图像就不会显示在底部或右边界下（如果设置为border-box的话会这样）。

从CSS3.info开始：
background-origin属性用于确定如何计算某个框中背景的background-position。
background-clip属性用于确定背景是否延伸到边框中。

读这个：http://www.css3.info/preview/background-origin-and-background-clip/
'background-clip'是指背景是在框中、填充中还是其他位置！
“background-origin”用于计算某个背景在某个边框、填充或其他内容中的位置！

此矩阵说明了两者的差异以及两者何时有效：
http://codepen.io/anon/pen/RNVKvj
超文本标记语言

<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>

中央支助系统

.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;
}

background-position对background-origin对background-clip

• 我们可以使用background-origin属性来告知背景图像从容器元素左上角开始的位置，它不告知图像的其他边将发生什么
• background-position设置相对于background-origin设置的位置。因此，如果我们设置background-origin: content-box和background-position: 50px 0px，则背景图像的位置将从内容框的边缘开始计数。background-origin和background-position可以单独或一起移动容器元素内的图像
• 另一方面，background-clip属性设置背景图像在容器内扩展到的部分，然后将被剪切。background-clip不能移动图像，它只能剪切图像
• 使用background-origin和background-position，我们将图像移动到容器元素内的期望位置，然后使用background-clip，我们剪切图像的期望部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Background Clip</title>
    <style>
      body {
        background-color: darkmagenta;
      }
      .container {
        background-image: url(/public/images/flying-bird.jpg);
        font-size: 100px;
        font-weight: 800;
        width: 30%;
        text-align: center;
        background-size: contain;
        background-repeat: no-repeat;
        /* background-position: 50px 0px; */
        /* background-origin: border-box; */
        /* background-clip: content-box; */
        /* background-clip: text; */
        /* -webkit-background-clip: text; */
        /* color: transparent; */
        padding: 30px;
        border: 20px dashed dodgerblue;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="container">CSS Magic</div>
  </body>
</html>

/* background-position only -> add this code above */
.container {
    background-position: 50px 0px;
}

/* background-origin only -> add this code above */
.container {
  background-origin: border-box;
}

/* background-origin + background-position -> add this code above */
.container {
  background-position: 50px 0px;
  background-origin: border-box;
}

/* background-origin + background-position + background-clip -> 
   add this code above */
.container {
  background-position: 50px 0px;
  background-origin: border-box;
  background-clip: content-box;
}

/* background-origin + background-position + background-clip ->
   add this code above */
.container {
  background-position: 50px 0px;
  background-origin: border-box;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

背景来源

在这个属性之前，当我们在元素中添加background-image时，图像的位置是从元素中的padding的左上角开始的。background-origin让你决定你想要的background-position的起始点是什么，边框还是padding还是内容。
根据箱模型，background-origin的新属性具有3个值：
border-box -将背景位置定位在边框的左上角0，0磅。padding-box（默认）-将背景位置定位在填充的左上角0，0磅。content-box -将背景位置定位在内容的左上角0，0磅。

背景剪辑

使用background-clip，我们可以决定在哪里剪切背景图像，它与前面提到的背景原点值相同。
background-clip的新属性有3个值：
border-box（默认）-显示完整的图像，不剪切任何内容。padding-box -剪切背景图像的边框。content-box -剪切背景图像的边框和填充。
取自链接：
https://coderwall.com/p/h7dwaq/say-hello-to-background-origin-and-background-clip-css3-new-features

我写了一篇关于这个主题的文章，如果有人真的想看看background-clip和background-origin之间的区别，那么就看看这篇文章吧。

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

简而言之
背景来源：指定图像原点
背景剪辑：规定涂装区域