html背景图片自适应浏览器

原创于 2016-10-26 18:02:48 发布 · 658 阅读

CC 4.0 BY-SA版权

本文介绍了如何在网页中设置背景图片使其能够适应不同分辨率和缩放情况的方法。通过使用CSS定位属性和调整图片的宽度及高度，可以实现背景图片的良好适配效果。

在网页中设置背景图片最简单的是直接设置图片显示的像素大小，但是肯定不能满足浏览的缩放显示的。
<img src="path" width=200px>

后面在网上查到一种办法

<div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">    
<img src="pictures/background.jpg" height="100%" width="100%"/>

利用z-index =-1 把图片放到最后一层，防止文字被图片覆盖，在利用图片的等比例拉伸去适应浏览器显示像素的变化。但是在实际的始终中还是有问题：
1.边缘还是有白边
2.存在没有一直图片拉伸，而将图片重复了一次的情况。
最后采用了style 中position为fixed反而好了。

 <div id="Layer1" style="position:fixed; width:100%; height:100%; z-index:-1">    
<img src="pictures/background.jpg" height="100%" width="100%"/>

后面为了不再每次都直接复制js代码，就在css 中定义样式

bg{
positiong:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index=-1;
}
bg>img{
height:100%;
width:100%;
border:0;
}

在代码中调用：

<div id="bg"><img src='path'></div>