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; }
总结:如果要实现背景全屏又不会有明显变形,在设计时,背景图片边缘颜色最好是纯色或者渐变。