分类目录归档:css

background-size: cover的注意事项

首先说一下w3c对该属性的解释:background-size: cover (兼容性:ie9以下不支持)    把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

注意:这里的扩展是等比例扩大的,所以不用担心图形会变形

一个经常用到的场景是:给body设置一个background-image,然后让它填满整个屏幕。这时就可以利用该css3属性了:

body {
    background-size: cover;
    background: url(1.jpg) no-repeat; 
}

但是如果你这时调整浏览器大小,你就会发现问题了:

background-size

多出来了底部的空白
继续阅读background-size: cover的注意事项