先来看w3c的background-size的几个值:
background-size:cover; 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
background-size:contain; 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
在项目中经常会使用一张背景图当作网页背景,我一直使用的是 background-size:cover; cover这个值是使背景图铺满全屏,但是背景图片可能显示不完全。
后来发现 background-size:100% 100%; 可以使图片铺满全屏并且使背景图片显示完全(荡然不同屏幕下背景图片会被拉伸或缩小),这个值相对于cover来说,更适合用来设置全屏背景,尤其是自适应宽高的网页中。
还有个 background-size:contain; 这个就是把背景图等比例缩放,尽量适应屏幕。