CSSを選択的にぼかします

Question

私はぼかしフィルタを使ってスマートなモダールなポップアップを得ようとしています。 -webkit-filter: blur(10px);。私はこのような特定の要素にぼかしを適用するとき、これは素晴らしい作品：私のモーダルポップアップが#main内であれば、あなたが期待するよう

body.modal_open #main { -webkit-filter: blur(10px); } 

はしかし、フィルタは、あまりにもその要素に適用されます。

私の質問は、特定の要素にフィルタを適用しないようにブラウザに指示する方法がありますか？私は追加しようとしました：

body.modal_open .modal_window { -webkit-filter: blur(0px); } 

しかし、それは動作しませんでした。要素のZ-インデックスなどに基づいてこれを行う方法はありますか？私はz-indexに基づいて要素を選択するCSSを見つけることができないので、それは不可能だと思っています。

すべてのモーダルウィンドウを#mainコンテナから外す唯一のオプションはありますか？それともそこにアイデアはありますか？

事前に感謝します。

Answer 1

これに対する回答を探している人にとっては、特定のレイヤーにfilter: blurを適用するために、Z-インデックスなどを使用する方法が見つかりませんでした。しかし、背景フィルタを使用して：

-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); 

私は希望の効果を達成するために管理しました。このメソッドは現時点ではonly supported in Safari and Chromeですが、今後数ヶ月、数年後にはさらに多くのブラウザでサポートされることを願っています。