CSS を使用してぼやけた半透明のオーバーレイを作成するにはどうすればよいですか?

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

問題:

背景をぼかした半透明のオーバーレイ div で、背後の要素をぼかします。ただし、現在の CSS コード (フィルター効果あり) では、望ましい結果を生成できません。

CSS:

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

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

解決策:

望ましい効果を実現するには、代わりに backdrop-filter CSS プロパティの使用を検討してください。この方法はより簡単で、より優れたクロスブラウザー サポートを提供します。

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

注: 背景フィルターのブラウザー サポートは普遍的ではありませんが、ほとんどの最新のブラウザーで機能します。ぼかしが必須ではない場合には、この代替手段が信頼できる解決策を提供します。

以上がCSS を使用してぼやけた半透明のオーバーレイを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。