背景图片铺满全屏的方法

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;
}

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


posted @ 2016-07-04 15:04  木西梧  阅读(5185)  评论(0编辑  收藏  举报