理解background-origin、background-clip、background-size在css中，背景图

一、css3新增background-origin

用一张图片做demo，为了方便看清边界，上下左右分别用了1px的红色、白色、黑色、蓝色

在css中，背景图是以padding的边界开始的，而背景颜色则是以边框边界开始。比如下面代码

.box {
    width: 100px;
    height: 100px;
    margin: 20px;
    padding: 50px;
    background: red url('./img.png') no-repeat;
    border: 10px dashed yellowgreen;
}

<div class="box"></div>

效果如下：

虽然padding=50，但是背景图紧紧靠着边框，整个padding都会铺上背景图。

而背景颜色，是从border就开始铺

而css3新增的background-origin可以控制这种背景图的平铺位置，可以控制图片从哪儿开始平铺，但是对于颜色控制不了，颜色始终都是border到content都会有

1.1 padding-box 默认值

设置这个和没有设置效果是一样的

1.2 content-box

背景图从内容开始平铺，而不从padding开始。background-origin: content-box。效果如下:

1.3 border-box

背景图从border开始铺：background-origin: border-box。效果如下:

二、css3新增background-clip

控制图片的平铺后裁切掉只展示哪些区域。

注意和background-origin不同意思的：background-origin控制的是平铺图片的起点，background-clip控制的是平铺图片后裁切要展示哪些区域

默认情况下，图片会从border一直显示到内容

.box {
    width: 100px;
    height: 100px;
    margin: 20px;
    padding: 50px;
    border: 10px dashed yellowgreen;
    background: red url('./img.png');
}

<div class="box"></div>

效果如下，可以看出图片起点是在border和padding交界处，但是在border有平铺效果出现