background-clip和background-origin

background-origin:该属性为background-position提供背景图的开始参考点，比如background-position为10px 20px,那这10px 20px是以谁（border-box、padding-box、content-box）进行移动呢？这就需要由background-origin来指定。

background-clip:划定背景图的显示范围，超出范围的不让显示，默认为border-box。

 

background-size:contain|cover

cover:当背景图尺寸小于容器的尺寸时，等比例拉升背景图直至铺满容器，图片可能会被裁剪。

contain: 当背景图尺寸小于容器的尺寸时，以宽度比或高度比来拉升图像，使得容器可以显示完整的图片，浏览器的算法如下

假设图片(100，50)，那么如果容器size是（500，300），按照等比进行计算：

假设以宽度等比放大，该图片需要的容器为：500， 250（500/100 * 50)，在实际容器size内，图片可以展示完

假设以高度等比放大，该图片需要的容器为600（300/50 * 100），300，超出了实际的容器，图片无法展示

因此，图片会以宽度进行等比放大，保障展示完自身，具体效果如下