在 Mobile Safari 上覆蓋背景圖像
Mobile Safari 的背景大小的獨特行為:封面屬性可能會令人沮喪。影像通常保持居中,不受視窗寬度的影響,而不是覆蓋整個 div。不過,這個問題可以透過一些修改輕鬆解決。
解決方案:
要讓背景影像覆蓋整個div,即使在Mobile 上,也可以調整背景附件屬性:
.section { margin: 0 auto; position: relative; padding: 0 0 320px 0; width: 100%; } #section1 { background: url(...) 50% 0 no-repeat; background-size: cover; background-attachment: scroll; } #section2 { background: url(...) 50% 0 no-repeat; background-size: cover; background-attachment: scroll; } #section3 { background: url(...) 50% 0 no-repeat; background-size: cover; background-attachment: scroll; }
如何有效:
透過設定background-attachment:scroll,現在允許影像隨著頁面內容滾動。這可確保影像始終覆蓋 div 的整個寬度,無論裝置或視窗寬度為何。
此解決方案有效地替換了 Mobile Safari 上的 background-size: cover 行為,使您可以輕鬆創建完整的內容- 響應不同螢幕尺寸的寬度背景圖像。
以上是為什麼背景大小:封面在行動 Safari 上不起作用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!