解决html中图片自适应屏幕大小的问题

解决html中图片自适应屏幕大小的问题

一、问题重现二、解决方案三、修改之后;重新看一下页面;底部没有再出现空白;图片正常适应屏幕大小

一、问题重现

页面底部有空白;如果换成其他电脑就看不出来;
但也只是暂时看不出来;如果按下F11全屏展示;还是会有白底。

二、解决方案

经过检查;发现是图片自适应屏幕大小的问题;将css的样式调整一下;

原来的样式;
.background-img {
	z-index: -1;
	background: url(../images/background.jpg) no-repeat;
	background-size: cover;
}

修改之后样式
.background-img {
	z-index: -1;
	background: url(../images/background.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-o-background-size: cover;
}

三、修改之后;重新看一下页面;底部没有再出现空白;图片正常适应屏幕大小