ホームページ > ウェブフロントエンド > CSSチュートリアル > オーバーレイ自体をぼかさずに、CSS オーバーレイで背景をぼかした効果を実現するにはどうすればよいですか?

オーバーレイ自体をぼかさずに、CSS オーバーレイで背景をぼかした効果を実現するにはどうすればよいですか?

Linda Hamilton
リリース: 2024-11-26 20:47:13
オリジナル
649 人が閲覧しました

How to Achieve a Blurred Background Effect on CSS Overlays Without Blurring the Overlay Itself?

CSS オーバーレイでのガラス効果の実現: ぼかしの問題の解決

問題: オーバーレイ div にぼかし効果を適用するオーバーレイの背後にあるコンテンツがぼやけずに残るため、これは困難であることがわかります。シンプルでブラウザを超えたソリューションを求めています。

解決策:

jsfiddle で提供される例では、CSS オーバーレイのぼかし効果に関する一般的な問題が示されています。オーバーレイがぼやけてしまいます。背景の代わりにそれ自体。これを修正するには、backdrop-filter プロパティの利用を検討してください。

更新CSS:

1

2

3

4

5

#overlay {

    ... (previous CSS) ...

 

    backdrop-filter: blur(6px);

}

ログイン後にコピー

利点:

  • より正確には: オーバーレイの代わりに背景をぼかし、希望の効果。
  • クロスブラウザ互換性: Chrome、Firefox、Edge などの主要なブラウザでサポートされています。
  • 簡略化されたコード: 複数のフィルター プロパティの必要性がなくなり、よりクリーンで保守しやすいソリューションが提供されます。

注:

ブラウザbackdrop-filter のサポートは、特に古いバージョンでは完全ではない可能性があります。ただし、以前に実装された CSS フィルターよりも大幅に改善されており、ぼかし効果が必須ではないほとんどのユースケースには通常十分です。

以上がオーバーレイ自体をぼかさずに、CSS オーバーレイで背景をぼかした効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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