為什麼我的固定背景圖像在行動裝置上損壞，如何僅使用 CSS 修復它們？

修復行動裝置上的背景問題：解決縮放和重複

在開發網頁時，您可能會遇到在行動裝置上調整固定背景影像的挑戰設備。該解決方案已被證明在桌面瀏覽器上有效，涉及使用 CSS 屬性，例如背景大小：封面和背景：固定的無重複中心中心，但無法在 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;
}

這個解決方案的工作原理是創建一個充當固定元素的偽元素。背景，位於所有其他頁面元素的後面。它利用了許多與 HTML 元素類似的 CSS 屬性，確保行為的一致性。

請注意，z-index 屬性設定為負值 -10，這對於偽-元素顯示為背景。 HTML 根元素的預設 z-index 值為 0，因此負值可確保偽元素放置在頁面上所有其他元素的後面。

以上是為什麼我的固定背景圖像在行動裝置上損壞，如何僅使用 CSS 修復它們？的詳細內容。更多資訊請關注PHP中文網其他相關文章！