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

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

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

解決策:

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

更新CSS:

#overlay {
    ... (previous CSS) ...

    backdrop-filter: blur(6px);
}

利点:

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

注:

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

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