背景图像不显示在 iPhone 上

Question

如何使背景图像在 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上的图像：

Answer 1

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

参考：链接

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

Answer 3

iOS 设备不支持背景图像。 证明链接： https ://caniuse.com/?search=background-url