在iPhone上不显示背景图像

如何在iPhone上显示背景图像并显示在Android上？在iPhone上不显示背景图像

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>

背景图像不会在Android上显示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; 
}

图片：

图片上iPhone：

来源

2017-07-04 D' lo DeProjuicer

？它与到Android？ –

@VladMatvienko因为它显示在Android上，我猜。 – the4kman

我喜欢我们为编辑而编辑@VladMatvienko –

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

编号：Link

来源

2017-07-04 08:15:47 Hash

一个可能的解决这个问题仍然是一个纯CSS后备

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

来源

2017-07-04 08:23:26

在iPhone上不显示背景图像

回答

相关问题