这个问题困扰了我几次,每次都让我花了许多时间去解决。【大概每次解决之后都忘记了】
问题描述
1.找一张合适的背景图片
2.设置body的背景样式
@media screen and (max-width:480px){
body{
background: url('1.png') no-repeat fixed center;
background-size: cover;
}
}
3.pc端浏览器模拟显示
乍一看,没有出现任何问题。
4.再来看看移动端浏览器
4.1 若body的高度是100vh,则效果一样,但body的高度小于或者大于100vh就会出现问题。
4.2 <100vh,背景伸张不开

4.3 若>100vh,背景图片会显示不全
5.所以这就让我十分苦恼,想尽了许多办法,也百度了很多次,可惜都没能找到想要的答案,后来不知道是回忆起了什么,还是其他什么。
解决方案
主要原理:定义一个底层div,给底层div设置绝对定位fixed,设置高度100vh,宽度100vw,这样就可当做背景了。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
min-height: 250vh;
min-width: 100vw;
}
.body-bg{
background:transparent;
}
@media screen and (max-width:480px){
.body-bg{
background: url('1.png') fixed no-repeat center;
background-size: cover;
position: fixed;
z-index: -1;
width: 100vw;
height: 100vh;
}
}
</style>
</head>
<body>
<div class="body-bg"></div>
</body>
</html>
可以看到这里body的高度设置的250vh,远远大于100vh,看看效果:
效果十分不错。
测试环境
1.pc端:win10 chrome 71.0
2.移动端:android 8.1.0 via 浏览器