在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上不顯示背景圖像

回答

相關問題