CSS はコンテンツに影響を与えることなく、半透明の要素の背景をぼかすことができますか?

CSS で背景のぼかしを実現する: 動的透明効果のガイド

質問:

ポップアップ ウィンドウ上の Vista/7 エアログラス スタイルの効果。ブラウザ間の互換性は優先事項ではありませんが、Web サイトは最新のブラウザで機能する必要があります。 CSS だけを使用して、内容に影響を与えずに半透明要素の背景をぼかすことはできますか?

回答:

更新日: 2016 年 10 月

擬似要素の使用:

• デモ: [ライブ デモ](リンク)
• 擬似の利用-要素を使用して、コンテナの内容に影響を与えずに背景のぼかしを作成します。
• 擬似要素の使用と SVG ぼかしフィルターを組み合わせます。

互換性:

• SVG ぼかしフィルターのサポートは、最新のブラウザー (IE を除く) で広く利用できます。
• 擬似要素のサポートは Firefox に限定されています。

以前: -moz-element() プロパティの利用:

• デモ: [ライブデモ](リンク)
• -moz-element() プロパティと SVG ぼかしフィルターを組み合わせます。
• 背景が固定位置にある場合は、スクロールに jQuery を使用します。

互換性:

• Mozilla ブラウザに限定されます (-moz-element() は Firefox に限定されます)。
• 他のブラウザでの実装には追加の作業が必要になる場合があります。

以上がCSS はコンテンツに影響を与えることなく、半透明の要素の背景をぼかすことができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。