「background-size: cover」を使用すると固定背景画像がクリップされるのはなぜですか?

CSS 背景サイズ: カバーと背景添付: 修正 背景画像のクリッピング

問題:

背景画像が「カバー」および「固定」に設定されている図のリストでは、次の場合に画像がクリップされます。 Figure はビューポートからオフセットされています。

説明:

この動作は、CSS での「固定」位置の動作方法に固有のものです。 「固定」配置では、要素の配置コンテキストから背景画像が削除され、ビューポートに位置合わせされます。その結果、「background-size: cover」の「cover」値は、要素自体ではなく、ビューポートを基準にして計算されます。

提案された解決策:

純粋な CSS では、背景画像に「固定」位置と「カバー」を使用することはできません。

代替解決策:

「固定」位置の代わりに、背景添付に「スクロール」を使用し、JavaScript でイベント リスナーをスクロール イベントにバインドします。これにより、ウィンドウのスクロール距離に基づいて背景の位置が手動で更新され、コンテナ要素に対する「カバー」を維持しながら固定位置をシミュレートします。

以上が「background-size: cover」を使用すると固定背景画像がクリップされるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。