如何僅使用 CSS 修復行動裝置上的背景圖片縮放問題？

修正了行動裝置上的背景影像縮放問題

將問題中提供的CSS 樣式套用到HTML 元件可以實現所需的縮放效果適合整個螢幕的背景影像，保持其縱橫比，並在桌面瀏覽器上固定在適當的位置。然而，這些樣式無法在 iPhone 和 iPad 上產生相同的結果。在這些裝置上，背景影像會超出視口，如果向下滾動足夠遠，背景影像就會開始重複。

為了解決此問題，我們開發了一種創新的解決方案，無需使用JavaScript：

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

此解決方案使用:before 偽類創建一個新元素，該元素絕對定位在整個body 元素上。背景圖像被指派給具有所需縮放和放置屬性的該元素。透過設定負 z-index 值 -10，該元素將成為整個頁面的背景，確保它位於所有其他內容後面。

此技術提供了一種簡單有效的方法來修復行動裝置上的背景圖片設備，解決了原始 CSS 樣式遇到的限制。

以上是如何僅使用 CSS 修復行動裝置上的背景圖片縮放問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！