完美的整页背景图像无法在移动设备上运行答案

【问题标题】：Perfect Full Page Background Image not Working on Mobile完美的整页背景图像无法在移动设备上运行
【发布时间】：2018-03-05 17:49:45
【问题描述】：

完美的整页背景图片在移动设备上无法正常工作...

你能帮我调整下面的 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>

【问题讨论】：

你能提供网址吗？？
@AnzilkhaN。是的：codepen.io/matie/pen/YemPyp

标签： html css background-image cover

【解决方案1】：

尝试像这样在你的 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
}

【讨论】：

虽然背景高度适合您的解决方案，但它并没有按照此解决方案的预期覆盖。高度被裁剪掉。我需要背景图片覆盖整个 div。
添加：背景位置：中心；
事实证明，iOS 设备不支持速记 CSS 形式的背景图像。另外，我认为 iOS 根本不支持背景图像“封面”属性。见帖子：stackoverflow.com/questions/36686654/…

【解决方案2】：

更新：

iOS 不支持“覆盖”一个部分的背景图像的简写 CSS。

答案：

Fixed background images disappear on iPhone/ iPad

Background image not showing on iPad and iPhone

【讨论】：