reference:
CSS3 Animation制作飘动的浮云和星星效果
css之background的cover和contain的缩放背景图
一个挺好用的图床,单张上限10M:
路过图床
为了让背景填满屏幕,写的时候加上这一句:
background-size: cover;
contain即为适应(图片完全显示,但屏幕可能有空白)
cover即为填充(屏幕全部填满,但图片可能有裁剪)
如果不写这句话,默认为平铺(按图片原来的大小显示)
对于这两个属性,官网是这样解释的:
contain:
此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
等比例缩放图象到垂直或者水平其中一项填满区域。
cover:
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
等比例缩放图象到垂直和水平两项均填满区域。