ブラウザ間の互換性を維持しながら、CSS を使用して動的ポップアップの Vista/Windows 7 Aero Glass ぼかし効果を実現するにはどうすればよいですか?

コンテンツに影響を与えずに CSS で背景をぼかす

質問:

Web サイト上の動的ポップアップの場合、 Vista/Windows 7 の Aero Glass に似た背景ぼかし効果。最新のブラウザとの互換性を維持しながら、CSS でこれを実現するにはどうすればよいですか?

回答:

更新 (2016 年 10 月):

改良された技術では、擬似要素と SVG ぼかしフィルターを利用します。以下のデモを参照してください:

[デモ: 背景ぼかしに疑似要素を使用](demo-link)

このアプローチは、ぼかしをサポートしていない IE を除き、クロスブラウザーで機能します。 CSS または SVG フィルターを使用します。

元の回答 (2016 年 10 月以前):

-moz-element() と SVG Blur Filter の使用:

1. -moz-element() プロパティを使用して、要素を別の要素の背景画像として定義します。
2. SVG ぼかしフィルターを背景画像に適用します。
3. オプションで、背景の位置が固定されている場合は、スクロールに jQuery を利用します。

ここでデモを参照してください:

[デモ: -moz- を使用する] element() for Background Blur](demo-link)

制限事項:

このメソッドは、-moz-element() を使用するため Firefox に限定されます。現在、これは Mozilla によってのみサポートされています。ただし、Webkit ブラウザに実装する取り組みも行われているため、将来のサポートが期待されます。

以上がブラウザ間の互換性を維持しながら、CSS を使用して動的ポップアップの Vista/Windows 7 Aero Glass ぼかし効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。