為什麼背景大小：封面在行動 Safari 上不起作用？

在 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中文網其他相關文章！