完美的整页背景图片在移动设备上无法正常工作...
你能帮我调整下面的 CSS/HTML 代码吗?
在 Chrome 中预览:
在 iPhone 7Plus 上直播:
注意到背景图像是如何倾斜、扭曲和模糊的吗? 为什么它看起来像实时的,但在预览模式下却不是?
我在文档中也有这个元代码:
<meta name="viewport" content="width=device-width, initial-scale=1">
CSS:
.MSL-Splash-Section {
display: block;
padding: 10px 0px 20px 0px;
text-align: center;
background: #FFF url(https://sephora.csod.com/clientimg/sephora/welcome/Animation_Backdrop.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
border: 1px #00000033 solid;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.MSL-Splash-Content {
padding: 20px 0px 40px 0px;
}
HTML:
<div class="MSL-Splash-Section">
<div class="MSL-Splash-Content">
<!-- STUFF -->
</div>
</div>
最佳答案
尝试像这样在您的 css 类中添加 100vh:
.MSL-Splash-Section {
display: block;
padding: 10px 0px 20px 0px;
text-align: center;
background: #FFF url(https://sephora.csod.com/clientimg/sephora/welcome/Animation_Backdrop.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
border: 1px #00000033 solid;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
height:100vh;//Add 100vh
}
关于html - 完美的整页背景图像不适用于移动设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49116543/