オーバーレイで CSS ガラスのぼかし効果を実現するにはどうすればよいですか?

CSS ガラス/ぼかし効果をオーバーレイに適用する

Q: 半透明のオーバーレイにぼかし効果を実装する

Web 開発者は、オーバーレイ div にぼかし効果を適用してコンテンツを div の背後に置く際に困難に直面しています。

前の試み:

開発者は次の CSS を使用して効果を実装しようとしました:

#overlay {
    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}

ただし、このアプローチは失敗しました。

改訂解決策:

よりシンプルで最新のソリューションの場合、開発者は backdrop-filter プロパティを利用できます:

#overlay {
    backdrop-filter: blur(6px);
}

ブラウザ サポート:

ブラウザの背景フィルタのサポートは包括的ではないことに注意してください。ただし、多くのユースケースでは、ぼかし効果は重要ではありません。

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