背景图片铺满全屏的方法

1.css3有一个属性:background-size:cover;可以让背景图片完全覆盖屏幕，但是IE9以下浏览器无效。

2.IE有个滤镜：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/body-bg.png', sizingMethod=scale);

经测试，没有什么效果。

3.有一种方法是：单独在body上放一个div，里面只放一个img，将该div定位最下方。ie，其他浏览器均可，但是img会变形（如果图片大小和网页内容宽高一致，变形不明显，但是一般页面的部分内容是动态加载的，高度不固定），影响视觉效果。不过如果你的背景图片比较有规律的话，可以使用该方法。

<div id="div1"><img src="./images/content_bg.png" />div>

div#div1{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:-1;
}
div#div1 > img {
    height:100%;
    width:100%;
    border:0;
}

总结：如果要实现背景全屏又不会有明显变形,在设计时,背景图片边缘颜色最好是纯色或者渐变。

转载于:https://www.cnblogs.com/sapho/p/5640529.html