ホームページ > ウェブフロントエンド > CSSチュートリアル > 「background-size: cover」と「background-attachment:fixed」は背景画像のクリッピングを引き起こしますか?どうすれば解決できますか?

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

Mary-Kate Olsen
リリース: 2024-11-27 05:41:09
オリジナル
717 人が閲覧しました

Does `background-size: cover` and `background-attachment: fixed` cause background image clipping, and how can it be solved?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート