固定されたバックグラウンドアタッチメントハック

スクロール中に置かれたままにする固定背景が必要ですか？ background-attachment: fixedモバイルブラウザーでは、しばしば失敗します。これは、この効果を達成するための回避策、「ハック」です。

問題

線形勾配と画像の2つの背景タイプで問題を調べましょう。

線形勾配

スクロール上の固定勾配の場合、このCSSを使用する場合があります。

体 {
  背景：線形勾配（335DEG、RGBA（255,140,​​107,1）0％、RGBA（255,228,168,1）100％）;
  背景攻撃：修正;
  バックグラウンドポジション：センター;
  バックグラウンドリピート：ノーリピート。
  高さ：100VH;
}

Android ChromeとFirefoxで、グラデーションがスクロールし、ジャンプします。これは、URLバーが隠されているときにリアルタイムでグラデーションを再レンダリングするブラウザの難易度に関連しているようです。 iOSサファリは同様の動作を示します。

背景画像

問題は画像でも同じです。

体 {
  背景：url（../ assets/test_pic.jpg）;
  バックグラウンドリピート：ノーリピート。
  バックグラウンドサイズ：カバー;
  バックグラウンドポジション：センター;
  背景攻撃：修正;
  高さ：100VH;
}

background-attachment: fixed 、要素の高さではなく、ビューポートに対する位置を計算するheightプロパティも無視します。これはbackground-attachment: fixed最小のビューポートを使用し、要素が最大のビューポートを使用しているためかもしれません。 ViewPortユニット（VH）URLバーが可視性を変更したときにサイズを変更しません。

caniuse 、バックbackground-attachment: fixed 。

ソリューション（ハック）

ソリューションにはbackground-attachment: fixed使用します。 background-attachment: fixed最小のビューポートを使用している場合、最大の要素を使用してみましょう。

2つのDivを作成します。1つは背景用、もう1つはコンテンツ用です。

<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バーが隠れているときにマイナーなスクロールが発生する可能性がありますが、主要な問題は解決されます。

考慮事項

この「ハック」はaを使用します<div>の代わりに<code><img alt="固定されたバックグラウンドアタッチメントハック" >セマンティクスとアクセシビリティに影響を与える可能性のあるタグ。画像が意味に重要である場合、<img alt="固定されたバックグラウンドアタッチメントハック" >適切なaltテキストを使用すると、ハックが完全に機能しないことを意味していても、より優れています。自動hideを依然として問題を引き起こす可能性のあるボトムナビゲーションバー。そのような場合、JavaScriptが必要になる場合があります。

以上が固定されたバックグラウンドアタッチメントハックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。