固定背景圖像在iPhone/iPad上消失

Question

我遇到問題background-image。我的網站在Android設備上看起來不錯，然後我發現iPhone和iPad不喜歡background-size: cover。

我通過設置background-size: 100%來解決這個問題。

在網絡上的iPhone模擬器上，該網站看起來相當不錯，但只要在真實iPhone（iOS 9.3）上測試網站，就不會顯示背景圖片。

加載了標題圖片，該圖片用作網站的下一個背景，它也顯示在那裏。 正好在加載的唯一背景上方的其他圖像開始加載，但似乎由於某種原因而中止。

圖像的大小是：1920x1080。

網站：http://www.unterwasserfotografie-thomas-uhl.de/

UPDATE：

我試着從下面阿齊茲」的解決方案。 玩弄背景大小：自動100％使智能手機上的圖像看起來更好，但它們沒有加載到手機蘋果設備上。 但是，如果設置了background-size：cover，所有背景都會被加載，問題是僅顯示圖像的一小部分（圖像的右上方？！），而這部分很模糊（看起來像放大）。 由於我沒有改變任何東西比設置背景大小：封面到背景大小：100％自動，我不能相信，圖像堆疊在一起。

目前我已經設置了背景大小：100％，這在桌面設備上看起來最好，到目前爲止移動設備還行，只要背景是背景，我不會擔心佈局未正確加載。

我明白，背景大小：100％自動不是最好的背景方式，並會定義考慮解決方案1.我不明白的是，爲什麼只有一個背景被加載，當加載在iPhone上的網站。背景位置：中心是否將所有背景都堆疊在屏幕上的相同位置，以便我只能看到已加載的最新的背景？請記住：網站上大約有6種背景，但只有其中一種顯示，其中也有圖像用於標題中。

感謝您的支持，迄今爲止，我將爲這個問題設置一個獎勵，因爲我真的對這個問題感到絕望。

Answer 1

這裏的主要問題之一是iOS移動設備出現錯誤，導致background-size:cover;和background-attachment:fixed;一起出現錯誤。

因此一個簡單的辦法是使用一個媒體查詢來改變移動的background-attachment屬性（屏幕寬度小於640像素）：

的CSS：

@media (max-width:640px) { 
 
    section { 
 
    background-attachment:initial; 
 
    } 
 
}

通過更改手機上的background-attachment媒體資源，您將可以在iOS設備上正常顯示圖片。

---編輯--- 根據這個問題：stackoverflow.com/questions/18999660/似乎有一個問題，在iOS上的背景屬性的速記順序。

也許嘗試你的手短轉換是這樣的：

.bg-1 { 
 
    background-image: url(../Dateien/sharkGround1920.jpg); 
 
    background-size: cover; 
 
    background-attachment:fixed; 
 
}

Answer 2

您的background-size設置了單個值寬度。這轉換成background-size: 100% auto，其中高度是自動的並保留高寬比。與的background-position耦合將導致背景位於視口的中間，並且周圍有空白。

演示：

的jsfiddle：https://jsfiddle.net/azizn/0dy8dL7z/

---

解決方案1：自動寬度，而不是自動高度

默認background-size: 100%指的寬度爲100％並且高度是自動的。這對橫向分辨率或設備非常有用。但是，當設備處於縱向顯示時，會有很多垂直空白。你可以使用這個邏輯，但打開它，這樣的高度是100％，寬度爲汽車應用background-size: auto 100%;

div { 
 
    height:400px; 
 
    border:1px solid red; 
 
    background: url(http://lorempixel.com/970/540) fixed no-repeat center; 
 
    background-size:auto 100%; 
 
} 
 

 
div:nth-of-type(2) { 
 
    background-image: url(http://lorempixel.com/960/541); 
 
} 
 

 
p { 
 
    background:#FFF; 
 
    padding:3em; 
 
    margin: 0; 
 
}

<div></div> 
 
<p>Lorem Ipsum</p> 
 
<div></div>

的jsfiddle：https://jsfiddle.net/azizn/0dy8dL7z/4/

這也可能是最好的內適用該規則@media查詢以定位景觀/移動設備。

---

解決方案2：繃背景

你可以通過應用背景尺寸解決這個問題：100％100％拉伸跨過視口的背景和除去空白。雖然背景將失去其寬高比並且可能會出現怪異的延伸。

div { 
 
    height:400px; 
 
    border:1px solid red; 
 
    background: url(http://lorempixel.com/970/540) fixed no-repeat center; 
 
    background-size:100% 100%; 
 
} 
 

 
div:nth-of-type(2) { 
 
    background-image: url(http://lorempixel.com/960/541); 
 
} 
 

 
p { 
 
    background:#FFF; 
 
    padding:3em; 
 
    margin: 0; 
 
}

<div></div> 
 
<p>Lorem Ipsum</p> 
 
<div></div>

的jsfiddle：https://jsfiddle.net/azizn/0dy8dL7z/2/

備選地可以刪除background-position或fixed附着或簡單地使用img標籤而不是背景。

每種解決方案都有其自身的缺點，因此請考慮更適合您項目的解決方案。

Answer 3

在你的背景圖片的CSS添加以下代碼：背景尺寸：100％100％;

Answer 4

不幸的是，你不能在iOS設備中以這種方式使用視差效果，因爲它們並不真正支持background-attachment規則。

如果您只想在iOS中放棄此效果，可以使用用戶代理來檢測設備並向主體添加一個類。

實施例：Simple way to identify iOS user agent in a jQuery if/then statement?

這種方式與JS代碼，可以應用以下的CSS：：

body.is-os section { 
    background-attachment: initial !important; 
    background-size: cover !important; 
} 

我用

var _isOS = navigator.userAgent.match(/(iPod|iPhone|iPad)/); 

if (_isOS) { 
    $('body').addClass('is-os'); 
} 

的檢測經由用戶代理的iOS參考重要的因爲我只用一個選擇器，爲了取t他優先於當前的代碼。

這工作在iPhone 6s Plus。

Answer 5

試試這個簡單的東西，用於跨瀏覽器背景大小的封面。他們愛背景大小也覆蓋，但有不同的方式:)

-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

Answer 6

我認爲瀏覽器的問題，其通過使用javascript獲取設備信息。然後按不同分辨率的設備加載圖像。