Question

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

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

Answer 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
}

Answer 2

更新：

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

回答：

Fixed background images disappear on iPhone/ iPad

Background image not showing on iPad and iPhone

完美的整页背景图像不适用于移动设备

2 个答案: