background-size学习笔记

2019独角兽企业重金招聘Python工程师标准>>>

分析下background-size的值

**1.**数值或者百分比，例如设置

background-size:100px 100px;

意思是背景图片的大小被设置为固定值，第一个值代表背景图的宽，第二个之代表背景图的高；因此，这个例子的意思是，背景图片的宽是100px，背景的高为100px；

若只设置了第一个值，也就是宽的值，那么默认第二个值，也就是高为auto，意思是按比例缩放，若背景图本来宽是200px，高是100px，那么设置了background-size:100px;就相当于设置了 background-size:100px 50px;

设置百分比同样理解；

**2.**设置为cover

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 若是背景图的宽小于容器，那么背景图的宽就会加大变为容器的宽，高度亦然；但是，只保证宽和高都大于或等于容器，至于多出来的背景可能就看不到了；

**3.**设置为contain

若设置为contain， 把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 也就是说，假如宽大于容器，那么就会把宽缩小成容器的宽度；假如是高大于容器，那么会把高缩小成容器的高度；但是，只保证能最大限度地显示完整的背景，但背景可能不覆盖整个容器。

说了这么多理论，也该举个例子了，下面引入个背景图：

这个背景图的款为252px，高为41px；

假如要设置容器的高度和宽度都是28px，而且容下单个图标，应该根据高来设置，按比例算出宽， width=（28/41）*252=170

因此应该设置background-size:170px;

转载于:https://my.oschina.net/daladida/blog/729315