固定背景附件黑客

想要滾動時固定的固定背景嗎？ background-attachment: fixed通常在移動瀏覽器中失敗。這是實現這一效果的解決方法，“黑客”。

問題

讓我們用兩種背景類型檢查問題：線性梯度和圖像。

線性梯度

對於滾動的固定梯度，我們可能會使用此CSS：

身體 {
  背景：線性畢業生（335DEG，RGBA（255,140,​​107,1）0％，RGBA（255,228,168,1）100％）;
  背景 - 固定；
  背景位置：中心；
  背景重複：無重複；
  身高：100VH；
}

在Android Chrome和Firefox上，梯度滾動，然後跳。這似乎與瀏覽器的難度實時重新渲染梯度有關，當時URL欄隱藏/出現。 iOS Safari表現出類似的行為。

背景圖像

圖像的問題是相同的：

身體 {
  背景：URL（../資產/test_pic.jpg）;
  背景重複：無重複；
  背景大小：封面；
  背景位置：中心；
  背景 - 固定；
  身高：100VH；
}

background-attachment: fixed還忽略了height屬性，相對於視口而不是元素的高度計算位置。這可能是因為background-attachment: fixed使用最小的視口，而元素則使用最大的視口。當URL欄更改可見度時，視口單元（VH）不會調整大小。

caniuse突出顯示瀏覽器與background-attachment: fixed 。

解決方案（黑客）

該解決方案涉及刪除background-attachment: fixed並使用單獨的元素進行固定。如果background-attachment: fixed使用最小的視口，讓我們使用使用最大的元素。

創建兩個divs：一個用於背景，一個用於內容：

<div class="bg"></div>
<div class="content">
  
</div>

像這樣的樣式：

 .bg {
  背景：線性畢業生（335DEG，RGBA（255,140,​​107,1）0％，RGBA（255,228,168,1）100％）;
  背景重複：無重複；
  背景位置：中心；
  身高：100VH；
  寬度：100VW;
  位置：固定；
  z index：-1; /* 選修的 */
}

。內容 {
  位置：絕對；
  保證金頂：5REM；
  左：50％；
  變換：Translatex（-50％）;
  寬度：80％；
}

這對於背景圖像也類似：

 .img {
  背景：url（'../ aSsets/test_pic.jpg'）;
  背景位置：中心；
  背景重複：無重複；
  背景大小：封面；
  位置：固定；
  身高：100VH；
  寬度：100VW;
}

雖然在URL欄藏書時可能會發生較小的滾動，但主要問題得到了解決。

考慮因素

這個“黑客”使用<div>而不是一個<code><img alt="固定背景附件黑客" >標籤，可能會影響語義和可訪問性。如果圖像對於含義至關重要，請使用<img alt="固定背景附件黑客" >使用適當的alt文本更好，即使這意味著黑客無法正常工作。自動內皮可能仍會引起問題的底部導航欄。在這種情況下，可能有必要使用JavaScript。