如何在不使用「background-size: cover」的情況下擴展 Mobile Safari 中的背景映像？

在移動Safari 中擴展背景圖片而不使用CSS background-size: cover

而CSS background-size: cover 通常用於擴展背景影像，某些場景，特別是在iOS 裝置上，可能會帶來挑戰。其中一個問題涉及擴展背景圖像以覆蓋寬度可能因視口大小和內容高度而變化的 div。

此問題的主要原因不是背景大小：覆蓋，而是背景附件：已修復。此屬性可防止背景圖像隨頁面內容移動，從而在行動裝置上產生不必要的行為。

要解決此問題，請考慮使用媒體查詢專門針對 iPhone 設備，並將 background-attachment 屬性設定為捲動。這允許背景圖像隨頁面滾動，有效解決問題。

以下是一個針對iPhone 裝置的帶有媒體查詢的CSS 程式碼範例：

.cover {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;

  @media (max-width: @iphone-screen) {
    background-attachment: scroll;
  }
}

透過合併此程式碼媒體查詢，您可以確保您的背景圖片不僅會擴充以覆蓋整個div，而且還能優雅地適應桌面和行動裝置上不同的視窗大小。

以上是如何在不使用「background-size: cover」的情況下擴展 Mobile Safari 中的背景映像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！