克服背景大小的限制:Mobile Safari 中的覆蓋
iOS 設備在實現背景圖像時面臨著獨特的挑戰,使用background -size: cover覆蓋整個元素。儘管是預期的行為,但此屬性通常會在這些平台上產生不良結果。
為了解決此問題,出現了一個巧妙的解決方法。透過調整背景附件屬性以在專門針對 iPhone 的媒體查詢中滾動,可以糾正有問題的行為。
以下是所提供程式碼的更新版本:
.section { margin: 0 auto; position: relative; padding: 0 0 320px 0; width: 100%; } #section1, #section2, #section3 { background-size: cover; background-attachment: fixed; background-position: center center; @media (max-width: @iphone-screen) { background-attachment: scroll; } }
透過包含在此媒體查詢中,background-attachment 屬性設定為僅在寬度小於或等於預先定義的@iphone- screen 變數的裝置上滾動。這可確保背景影像在 iPhone 上按預期運行,同時在大螢幕上保持固定位置。
此解決方案提供了一種簡單而優雅的方法來處理此常見問題,使您可以創建無縫的全角背景圖像適用於所有設備,包括 iOS。
以上是為什麼 `background-size: cover` 在 Mobile Safari 上失敗以及如何修復?的詳細內容。更多資訊請關注PHP中文網其他相關文章!