背景图像不显示在 iPhone 上答案

【问题标题】：Background Image not displaying on iPhone背景图像不显示在 iPhone 上
【发布时间】：2017-07-04 07:50:49
【问题描述】：

如何让背景图片在 iPhone 上显示与在 Android 上显示一样？

HTML

<div class="bgimg-1">    
    <div class="hometoptext ">
        <h1 class="text-center">
            Africa's First Online Business Lender
        </h1>
        <div>
            <h3 class="thin">Grow faster with South Africa's most innovative online funder</h3>
        </div>
        <div class="text-center">
            <button class="btn btn-primary" (click)="applyNow()">APPLY NOW</button>
        </div>
    </div>
    <div class="bottom-arrow text-center">

    </div>
</div>

背景图片不显示在 iPhone 上

CSS

.bgimg-1 {
    background-image: url("img/main_pic2.png");
    color: white;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-color: #999;
    position:relative;
    width:100%;
    min-height: 100vh;
    top: 0;
}

Android 上的图片：

iPhone 上的图片：

【问题讨论】：

它与 Android 有什么关系？
@VladMatvienko 因为它显示在 Android 上，我猜。
我喜欢我们为了编辑而编辑@VladMatvienko
只是一个建议，iOS似乎部分支持background-attachment: fixed - caniuse.com/#search=background-attachment

标签： html ios css iphone

【解决方案1】：

iOS Safari 在background-size: cover; + 上有错误行为 background-attachment: fixed;
Safari（OS X 和 iOS）和 Chrome 不支持背景大小：100% 像素；结合 SVG 图像，它将它们留在原始大小，而其他浏览器正确拉伸矢量图像同时将高度保持在指定的像素数。
iOS Safari 在background-size: cover; 上存在错误行为页面的正文。
macOS Safari 10 与 background-size 存在帧速率问题。
Android 4.3 及以下浏览器被报告不支持百分比在background-size

参考：Link

【讨论】：

【解决方案2】：

这个问题的一个可能的解决方案仍然是纯 CSS Fallback

CSS Tricks 有三个很棒的方法，后两个是当 CSS3 的覆盖不起作用时的后备。

HTML

<img src="img/main_pic2.png" id="bg" alt="">

CSS

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspect ratio */
  min-width: 100%;
  min-height: 100%;
}

【讨论】：