首頁  >  文章  >  web前端  >  為什麼背景大小:封面在行動 Safari 上不起作用?

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

Susan Sarandon
Susan Sarandon原創
2024-11-08 06:35:02201瀏覽

Why Doesn't Background-Size: Cover Work on Mobile 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中文網其他相關文章!

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