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,超出了实际的容器,图片无法展示
因此,图片会以宽度进行等比放大,保障展示完自身,具体效果如下