iPhone無法載入背景圖片

Question

我有一個具有background屬性的div 。 background是一個可以在所有計算機和瀏覽器上正常運行的url ，在Android上可以正常運行，但在iPhone上則無法正常運行。

這是div的樣式：

background: url('http://emergypower.com/assets/images/attraction.png');
background-position: center -90px;
height: 590px;
width: 100%;

這是自定義CSS，我沒有為此使用框架。 此外，當用戶在iPhone上打開“選項卡視圖”（以查看他們已打開的所有Safari選項卡）時，圖像顯示正常，但是在真實瀏覽器視圖中打開時，圖像不會顯示。

我最初沒有設置寬度，並認為這可能引起了問題，但此后對其進行了編輯，因此沒有任何區別。

Answer 1

它認為我可能有三種可能的解決方案。 這可能取決於您要測試的iOS版本。

1. 在較舊的iOS設備上，修復背景圖像錯誤的一個舊方法是添加-webkit-transform: translateZ(0); 元素。

2. 某些較舊的iOS版本的圖片文件大小限制為2290x2290px。 形象大嗎？

3. 新增position: relative; 和background-repeat: no-repeat; 可能會解決問題。

Answer 2

嘗試將背景更改為此。

background: url("http://emergypower.com/assets/images/attraction.png");
background-size: cover

Answer 3

Ethaan可能是正確的，但我更喜歡使用background-size: 100% cover; 以確保圖像始終根據容器大小調整大小。

Answer 4

添加背景尺寸

background: url("http://emergypower.com/assets/images/attraction.png");
background-size: 100% 100%;