背景图片铺满全屏的方法


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

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


					


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM