如何在沒有 JavaScript 的情況下修復行動裝置上的全螢幕背景影像重複？

故障排除背景：修正行動裝置上的無重複問題

問題：

使用者正在實施完整的操作時面臨困難在行動裝置（iPhone 和iPad）上具有固定位置的螢幕背景影像。儘管使用 CSS 進行背景樣式，但圖像看起來過大，並且在向下滾動時往往會重複。

解決方案：

為了解決此問題，一種新穎的解決方案的出現消除了對 JavaScript 的需求。引入新的CSS 程式碼段：

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;
}

說明：

• body:before 偽元素在HTML 文件正文之前建立一個附加元素.
• 絕對定位確保元素相對於元素保持在固定位置視口。
• 負 z 索引 (-10) 使元素能夠出現在頁面常規內容的後面。
• 背景圖片、其位置、縮放和固定與用於桌面瀏覽器的原始 CSS。

需要注意的是，這種技術是無供應商前綴的，消除了跨瀏覽器相容性問題。

以上是如何在沒有 JavaScript 的情況下修復行動裝置上的全螢幕背景影像重複？的詳細內容。更多資訊請關注PHP中文網其他相關文章！