首頁 >web前端 >css教學 >如何在沒有 JavaScript 的情況下修復行動裝置上的全螢幕背景影像重複?

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

Susan Sarandon
Susan Sarandon原創
2024-12-11 04:15:09281瀏覽

How to Fix Full-Screen Background Image Repeating on Mobile Devices Without 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn