CSS の `background-size: cover` と `background-attachment:fixed` による背景画像のクリッピングを防ぐにはどうすればよいですか?

CSS を使用した背景画像のクリッピング: 背景サイズのカバーと背景添付の修正について

図のリストで背景画像を使用する場合、オフセットがある場合、background-size: cover と background-attachment: の両方を設定すると、クリッピングの問題が発生する可能性がありました。この動作は CSS の固定位置に固有のものですが、この問題を軽減する CSS のみのソリューションを検討します。

CSS の仕組み:

背景添付の組み合わせ: 固定と背景-size: cover は、背景イメージをビューポート相対の「固定」イメージとして動作させ、カバー値は要素ではなくビューポート サイズを基準にして計算されます。これは、要素がビューポートを満たすときは画像が適切にカバーされるが、小さいときは切り取られる理由を説明しています。

提案された解決策:

残念ながら、固定位置が一致しないため、純粋な CSS ソリューションは不可能です。望ましい位置合わせ動作。ただし、スクロール イベントにバインドされた JavaScript イベント リスナーを使用すると、固定位置をシミュレートし、必要な配置を維持できます。

具体的には、スクロール イベント リスナーをバインドし、現在のスクロールに基づいて背景位置プロパティを手動で更新します。位置を変更して、背景サイズを計算しながら固定位置の効果を実現します: コンテナ要素を基準としたカバー。

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