4

純粋に審美的なデザインの問題として、不透明でない背景を持つ要素の背後にあるコンテンツをぼかすことができるかどうか疑問に思っています.

より具体的には、(カスタム アラート/確認/プロンプト セットアップの一部として) モーダル ボックスを表示すると、現在、ドキュメントの背景と同じ色のマスクを画面上に配置することで、背景のコンテンツが「フェード」します。

私がやりたいのは、マスクされたコンテンツに少量のぼかし (ほんの数ピクセル) を適用して、モーダル ボックスにさらに注意を向けることです。

前述したように、ブラウザの互換性は問題ではありません。最低でも IE9 で、可能であれば Chrome で動作するようにしたいと考えています。

また、jQuery はありません。どうしても、必要に応じて jQuery で回答を提供してください。ただし、サイトの近くに置く前に生の JS に変換します。

4

4 に答える 4

1

純粋なCSSでは不可能..

これは非常に複雑なプロセスであり、多くの JavaScript が必要ですが、それが唯一の方法だと思います...

于 2012-03-18T16:09:36.143 に答える
1

backdrop-filter現在、 CSS プロパティを使用できます。

CSS:

.modal {
    backdrop-filter: blur(10px);
}
于 2020-06-26T16:14:01.570 に答える
0

これには、JavaScript (およびかなり複雑な JavaScript) が必要です。

私が理解していることから、半透明の要素の背後にあるコンテンツにぼかし効果が与えられる「エアログラス」効果を作成しようとしているようです。HTML と CSS だけでは不可能です ( IE 専用フィルターの使用を検討しない限り)。

現時点では、あなたが説明しているような画像フィルターを動的に適用できる CSS プロパティはありません。

于 2012-03-18T15:48:06.963 に答える
0

Gaby によって提示された html2canvas ソリューションは、やり過ぎの可能性があります。ぼかした同じウェブサイトのiframeで同じ効果を得ることができます（フィルターぼかしまたは別の手法-「-webkit-filter：blur（2px）」は、私の知る限りクロムでのみ機能します。

とはいえ、どちらのソリューションも本当にハックであり、個人的にはどちらも使用したことはありません。好奇心からこれが可能かどうかを確認するために、これを試してみました。

ここで (クロムのみ) の例を参照してください: https://s3.amazonaws.com/blur-demo/index.html

于 2013-05-29T17:20:33.220 に答える