background-size中各属性的用法

前言

CSS 中背景图片的自适应大小问题一直困扰着我，即便有时候实现了自己的想要的效果但是下一次遇见问题还是无法处理，为此打算整理出一篇文章来总结一下背景图片自适应的方法。

对于 background-size 网上描述了几个属性：

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小

一般我们用的多的是 length cover 和 contain，下面分别看看它们的用法：

length

用法示例：

background-size: 100% 100%;

两个参数分别对应了背景图片的宽和高，因此给他们100%就能实现背景图片完全铺满整个背景的效果，缺点就是图片会变形

cover 和 contain

cover 和 contain 的一个共同特点是图片能保持原有比例进行缩放，但是他们是不能自适应背景大小进行缩放的，因为图片的宽高比和背景的宽高比未必相同。

cover 会将背景图片完全覆盖住整个背景，但是可能会超出背景，超出部分就直接看不见了

contain 的特点是不会超出背景，但是可能无法铺满整个背景，因此会出现重复的现象

如果想用 cover 和 contain 来实现调整图片位置，可以搭配

 background-position: center;

它可以将背景图的缩放参照点位于中心，因此在等比缩放的时候效果会更加好看