修復行動裝置上的背景問題：解決縮放和重複
在開發網頁時，您可能會遇到在行動裝置上調整固定背景影像的挑戰設備。該解決方案已被證明在桌面瀏覽器上有效，涉及使用 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中文網其他相關文章！
