背景圖像不顯示/延伸在iPad或iPhone上

我在github頁面上有website，它可以在任何桌面瀏覽器上正常工作。但是，我的兩個背景圖像不會顯示在移動設備上（我只測試過iPad和iPhone，它可能只是IOS）。我試圖添加媒體查詢，以確保手持設備上的background-attachment屬性設置爲scroll（我讀過這有時是問題）。我也有媒體查詢，以確保圖像不會太大，無法加載。這裏是我的html：背景圖像不顯示/延伸在iPad或iPhone上

<div id="image-1" class="background-image"></div> 
<div id="image-2" class="background-image"></div>

這裏的CSS：

#image-1 { 
    background-image: url('imgs/coding.jpg'); 
} 
#image-2 { 
    background-image: url("imgs/game.JPG"); 
} 
@media only screen and (min-width: 500px) { 
    /* For mobile phones: */ 
    #image-1 { 
     background-image: url("imgs/coding-large.jpg"); 
    } 
    #image-2 { 
     background-image: url("imgs/game-large.jpg"); 
    } 
} 
@media not handheld { 
    .background-image { 
     background-attachment: fixed; 
    } 
} 
.background-image { 
    opacity: 0.8; 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    background-size: 100% 100vh; 
    height: 85vh; 
}

如果我改變100vh至100％，然後將圖像加載，但他們可怕的垂直拉伸。有什麼建議麼？

來源

2017-03-07 Caleb Bertrand

您可以：

使用一個固定的位置，與背景位置center center：詳見「CSS background-size: cover replacement for Mobile Safari」。
This page指background-attachment: fixed;爲好，而佈雷使用該視口中技術支持iOS 7的值（如vh和vw），但根本不起作用，因此rodneyrehm/viewport-units-buggyfill項目。
或（那麼優雅），使用媒體的固定大小與給定大小：詳見「Background image not displayed properly on iPad and iPhone」

來源

2017-03-07 04:57:41 VonC

它看起來像你的競爭與背景大小屬性和你的背景height屬性的高度。退房CSS-Trick's post on background-sizes for a better implementation。由於它看起來像要覆蓋圖像的頁面寬度，因此請使用background-size:cover代替。希望這可以幫助。

來源

2017-03-07 04:58:28 TimJK

使用此

/* Image is centered vertically and horizontally at all times */ 
background-position: center center; 

/* Image doesn't repeat */ 
background-repeat: no-repeat; 

/* Makes the image fixed in the viewport so that it doesn't move when 
the content height is greater than the image height */ 
background-attachment: fixed; 

/* This is what makes the background image rescale based on its  container's size */ 
background-size: cover;

來源

2017-03-07 05:00:46 flashbang

的iPhone似乎無視handheld設備（見這裏Do iPhone/Android browsers support CSS @media handheld? ）@media規則。如果圖像不是正方形，則100% 100%的background-size屬性會使圖像拉伸。

因此，您可以使用max-width媒體查詢來檢測移動設備，並將background-attachment設置爲scroll。並使用background-size: cover或背景大小：100% auto

來源

2017-03-07 05:20:48

背景圖像不顯示/延伸在iPad或iPhone上

回答

相關問題