如何解決行動裝置上的全螢幕背景影像問題？-css教學-PHP中文網

如何解決行動裝置上的全螢幕背景影像問題？

Susan Sarandon

發布： 2024-12-05 21:06:14

原創

163 人瀏覽過

How to Fix Full-Screen Background Image Issues on Mobile Devices?

修復行動裝置上的背景影像問題

建立背景影像延伸到全螢幕的網頁時，保持其寬高比，並且在滾動過程中保持固定，可能會使用以下CSS代碼：

HTML {
  background: url(photos/2452.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

登入後複製

但是，應用如果滾動得足夠遠，此代碼在移動設備（例如 iPhone 或 iPad）上可能會導致背景圖像變得過大並重複。

解決方案在於建立一個「before」偽元素作為HTML 正文的一部分，如下所示：

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」偽元素的z-index 值設定為負數（例如， -10)，因為HTML 根元素的預設z-index 為0。此負值將背景置於最低層。

以上是如何解決行動裝置上的全螢幕背景影像問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！