CSS3 background-orgin与 background-clip的区别

最大的区别为：background-orgin是指图片从坐标系的那个位置展开。而background-clip 是指图片覆盖的区域，以外的区域将被剪掉看不到。

1. background-orgin

origin 有起源的含义：在CSS3中background-position指从坐标系的那个位置开始展开，一般图片展开的时候是从内边距开始展开的，但是在有时候我们想让从照片从外边框开始展开就可以用到background-origin这个属性，其中有三个参数：分别为border-box, padding-box, content-box。 

border-box 是这指图片从外边框开始展开，padding-box 是指图片从内边距处开始展开图片，content-box是指图片从内容处开始展开图片。 当内边距（padding）为0时，padding-box 与content-box 一样。

在这我写了一个例子，有一个粉丝的背景以便于，大家能看到效果，有一个宽的外边距，背景图片不平铺，可以看一下效果就一目了然了。

  div{
            width: 100px;
            height: 100px;
            background-image: url("./bdad.png");
            background-repeat: no-repeat;
            padding: 50px;
            border: 30px dashed pink;
            background-color: darkred;
            display: inline-block;
        }
        .box1{
            background-origin: content-box;
        }
        .box2{
            background-origin: padding-box;
        }
        .box3{
            background-origin: border-box;
        }

    

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

2. background-clip

clip有剪掉的含义，在CSS3中background-clip代表图片从那个位置可以看到，其他区域将被剪掉，也就看不到了，这个属性可以用到我们使用精灵图（雪碧图）时使用。它有三个参数分别为： content-box , padding-box, border-box

content-box 是指从内容以外的区域将被剪掉看不到了，padding-box 是指从padding值以外的区域被剪掉看不到了，border-box 是指从外边距以外被剪掉看不到了

在这里我举个例子 

 div{
            width: 100px;
            height: 100px;
            border: 20px dashed #eee;
            background-color: darkred;
            background: url("abc.jpg");
            background-repeat: no-repeat;
            display: inline-block;
            padding: 30px;
        }
        .box1{
            background-clip:content-box ;
        }
        .box2{
            background-clip:padding-box ;
        }
        .box3{
            background-clip:border-box ;
        }

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

结果显示content-box 从内容以外的背景都看不到了，padding-box 从padding以外的背景都看不到了，border-box从外边距以外的背景都看不到了