background-size:100%;总是X轴100%铺满整个容器,Y轴可能被裁剪会出现空白填不满部分,图片不变形。
background-size:100% 100%;图片不保持比例放大或缩小使X轴与Y轴都铺满整个容器,图片可能会变形。
background-size:cover;图片保持比例放大或缩小使X轴与Y轴都铺满整个容器,但图片超出容器部分会被裁剪掉,图片不变形。
background-size:contain;图片保持比例放大或缩小填充容器,若不能完整填充容器,X轴或Y轴都有可能出现白边,图片不变形。
Object-fit:
background 简写属性在一个声明中设置所有的背景属性。他有8个属性:
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
他是一个复合属性:为了可读性,定一个CSS书写规范,规则2.1:
background的值的顺序是background-color,background-image,background-repeat,background-attachment,background-position。
其余三个background-size,background-origin,background-clip是要单独写的