H5 背景图片自适应屏幕问题解决办法

时间:2024-02-24 13:06:34

 

今天也是偶然遇到这个问题的,平成很少用到关于css的内容,就在网上找了很多个方法,最后总结以下几种很实用的方法

方法1:

<style>

body{
background:url(beijingtu.gif) top left;
background-size:100%;

}

</style>

 

方法二:

<body>

<div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">

<img src="beijingtu.gif" height="100%" width="100%"/>

</div>

</body>

 

方法三:

先使用一个style标签

<style>

.background_img{

background:url("beijingtu.gif") no-repeat;

background-size: 100%; //这一设置把图片铺满整个背景

}

</style>

 

然后在body里使用

<body class="background_img"> 网页内容 </body>