background-size
background-size属性用来控制背景图片的大小。参数的值可以是数值也可以是百分数，还可以是cover和contain。如果只有一个参数，此值用来规定背景图片的宽度，这个时候背景图片的高度是按照宽度进行等比例缩放；如果有两个参数，第一个参数用来规定背景图片的宽度，第二个参数用来规定背景图片的高度。
数值或百分比
例如：
当设置background-size为120%时，尺寸超过容器，图片将会被裁切。
cover
属性值设置为cover之后，背景图像会等比缩放到完全覆盖容器，背景图像有可能超出容器，不过超出的部分将会被裁切。
例如：
contain
contain与cover的区别是，contain只挑横向或者纵向任意一个方位将容器填充满：
background-origin
background-origin属性用于指定背景图片从什么地方开始绘制，但并不限制绘制区域。默认值为padding-box语法如下：
1 | background-origin:border-box|padding-box|content-box |
border-box
此属性值规定背景图片从border区域开始绘制（包括border）。比如：
可以看出背景图片是从边框开始渲染的，包括边框区域。
padding-box
规定背景图片是从padding开始绘制的，包括padding区域，例如：
可见背景图片是从padding区域开始绘制的。
content-box
此属性值规定，背景图片是从内容区域开始绘制的，所谓内容区域就是出去border和padding区域，比如：
可见，背景图片是从内容区域开始绘制的。但右下角padding和border区域都有背景图片的显示，因为background-origin属性从名字可以看出，它只规定图片的起源位置，而并不关心图片的结束位置。要限制图片的结束位置，可以使用background-clip属性。
background-clip
background-clip属性规定背景图片在哪些区域可以显示。语法如下：
1 | background-clip:border-box|padding-box|content-box|text|no-clip |
border-box
border-box属性值规定，背景图片可以在边框范围内显示，例如：
可看到，虽然规定背景图可在边框内显示，但左上区域边框下却没有背景图，因为background-origin属性的默认值为padding-box！
padding-box
padding-box属性值规定，背景图片可以在padding范围内显示，不能在border区域显示，例如：
content-box
content-box属性值规定背景图片可以在content区域，也就是除去padding和border的区域内显示，例如：
可以看出，背景图片这个时候只能够在content范围内显示了。
text
从前景内容的形状（比如文字）作为裁剪区域向外裁剪，也就是说只有前景内容的形状内显示背景图片，例如只有文字内显示背景。比如：
