コンテンツに影響を与えずに、CSS で動的な Vista/7 スタイルのぼかした背景を作成する方法

CSS を使用したぼかした背景

質問:

動的な Vista/7 スタイルのぼかした背景を作成するにはどうすればよいですか?要素内のコンテンツに影響を与えずに CSS で効果を与えることはできますか?

回答:

更新 (2016 年 10 月):

SVG フィルターと擬似要素の使用:

より単純なアプローチには、SVG ぼかしフィルターと組み合わせた擬似要素の使用が含まれます。この手法により、コンテンツの不鮮明さが回避され、Firefox、Chrome、Opera を含む幅広いブラウザがサポートされます。

元の解決策:

Using -moz-element( ) SVG フィルターを使用 (Firefox のみ):

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

このソリューションは Firefox に限定されていますが、望ましい効果。

以上がコンテンツに影響を与えずに、CSS で動的な Vista/7 スタイルのぼかした背景を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。