背景图像不显示在 iPhone 上

Posted 2023-03-11

【中文标题】背景图像不显示在 iPhone 上

【英文标题】：Background Image not displaying on 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

【参考方案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" >

CSS

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

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