「background-size: cover」と「background-attachment:fixed」は背景画像のクリッピングを引き起こしますか?どうすれば解決できますか?

CSS Background-Size: Cover Background-Attachment: 背景画像のクリッピングを修正

background-size の背景画像が表示されない状況に遭遇することがありますか? : カバーと背景添付ファイル: クリップされる問題を修正しました?

問題:
質問が示すように、背景画像を使用する図のシナリオでは、background-size: cover と background-attachment:fixed の組み合わせにより、オフセットがある場合に背景画像がクリッピングされます。 Mozilla によって文書化されているように、これは CSS の固有の動作です。

目標:
望ましい結果は、画像が垂直方向または水平方向のいずれかでクリップされることですが、両方ではありません。

解決策:
残念ながら、これを達成するにはCSS だけで結果を得るのは不可能です。回答で詳しく説明されているように、CSS の固定位置により、背景画像とコンテナー要素の間に切断が作成されます。したがって、カバー値があっても、画像のサイズは Figure の寸法ではなくビューポートを基準にして決定されます。

JavaScript の代替案:
推奨される解決策は、JavaScript を使用してシミュレーションすることです。背景サイズを計算する際の固定位置効果: Figure 要素を基準としたカバー。これには、スクロール イベントをリッスンし、ビューポートのスクロールに合わせて背景の位置を手動で調整することが含まれます。

以上が「background-size: cover」と「background-attachment:fixed」は背景画像のクリッピングを引き起こしますか?どうすれば解決できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。