background-size:属性有 auto;length ;百分比
length 如:10px 20px 固定的
或者是写成一个 ,10px 另外一个就默认为 auto;
写成百分比的形式 是相对于div的宽度或者是高度的 包含padding 但是不包含 border的
background-size:cover 意思是背景图片全部填满整个div,往往需要配合background-position:center;来使用,是图片的中间和div的中间在一个中心点。唯一的
缺点就是需要制作一个足够大的背景图片,否则图片会失真。
background-size:contain 可以是背景图像保持本身的宽高比例,将背景图片缩放到宽度或者高度正好适应定义的背景区域。
总之,只有当background-size:值默认为auto的时候,背景图片才不会失真,而其他设置都会导致背景图片的失真,所以使用
的时候要仔细考虑,避免带来不良的后果。
具体的可以自己写一个demo来验证一下。就写到这里。