divタグの背後にあるすべてのオブジェクト（画像、div、テキスト..）をぼかします

Question

あなたの助けが必要です。

ウェブサイトの上部にある静的な半不透明なバナーを作成しました。ユーザーがウェブサイトをスクロールすると、コンテナオブジェクト全体がバナーの下に表示されます。私はすべてのオブジェクト（画像、テキストなど）がバラバラの下に行くにつれて光る効果を得たいと思っています。

ありがとうございました

Answer 1

これを行うには、いくつかのCSSとjavascriptを使用してください。 CSSはブラーを直接サポートしませんが、you can emulate it with text-shadowです。 Images can also be blurredではjquery/css/javascriptの魔法が少しありますが、部分的に画像をぼかすことはできないので問題になります（画像の一部だけがバナーの下に来るとどうなりますか？）。おそらく、画像を重ね合わせて画面上の位置を把握することで実現できますが、これは非常に小さな復帰のための多くの作業のようです。

このショットをすべて与えると決めた場合は、ページのどの部分がバナーの下を通過したかを判断し、その部分にスタイルを適用する必要があります。この作業の難しさは、ページレイアウトの複雑さに比例します。最良の場合のシナリオでは、バナーとコンテンツコンテナの両方がhtmlボディの幅の100％です。この時点で、スクロールするたびにdomを走査する何らかの種類のスキャナを書くことは、ぼかしを適用すべき要素を見つけるためにはかなり簡単です。しかし、最良のケースシナリオはほとんどありません。その時点で、より大きなROIで何かを追求しようとする努力を断念することをお勧めします。

Answer 2

これはCSSやjQueryでは不可能です。あなたはIEのfiltersで何かをすることができるかもしれませんが、それはIEだけです（もちろん）、あなたのCSSを無効にします。

現在、は、これを行う方法はありませんが、CSS 4などで何かが発生する可能性があります。

Chromeは夜間にsupport some filtersをビルドしますが、アルファブラーフィルタはありません（少なくとも）。