divの背後にある動的コンテンツをどのようにぼかすことができますか？

Question

フルスクリーンスタイルのGoogleマップページを使用してプロジェクトに取り組んでいます。 ヘッダーとスライドインサイドバーをオーバーレイする方法（css、jQuery、またはその他のオプション...）は、iOSの曇り/ぼかし効果に似たぼかし効果を伴いますか？

私はこのようなことを達成しようとしています。 Sample blurred header

私の問題は、ヘッダーの下にあるものを制御せず、絶えず変化するため、ぼやけた背景をシミュレートするために2つのイメージトリックを使用できないということです。助言がありますか？

Answer 1

CSSのぼかしはできますか？

-webkit-filter: blur(5px); 
-moz-filter: blur(5px); 
-o-filter: blur(5px); 
-ms-filter: blur(5px); 
filter: blur(5px); 

Answer 2

あなたは外部のイメージにロードされている場合は、背景としてsvgコンテナにロードしfeGaussianBlurフィルタを適用することができますか？あなたが持っているマークアップをどのくらい制御するかはわかりません。ブラーの

A W3学校プライマー：

http://www.w3schools.com/svg/svg_fegaussianblur.asp

jsfiddle（ない鉱山）：

https://jsfiddle.net/jamygolden/yUG5U/2/

サンプルマークアップ：

<svg id="svg-image-blur"> 
    <image x="0" y="0" id="svg-image" width="300" height="200" xlink:href="http://path/to.your/image.jpg" /> 

    <filter id="blur-effect-1"> 
     <feGaussianBlur stdDeviation="2" /> 
    </filter> 
</svg> 

CSS：

#svg-image-blur { height: 200px; width: 300px; } 
#svg-image:hover { filter:url(#blur-effect-1); } 

Answer 3

ソリューションは、この手順を使用していますhttps://stackoverflow.com/a/19688466/1663572や関連リンクhttp://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

この記事をお読みください。

1. HTML
2. がコンテンツ領域を複製し、キャンバスに変換レンダリングします。
がヘッダ部に
3. Syncをキャンバスを移動
4. ページのヘッダ部にキャンバス

下付きコンテンツのスクロールは、例えば、（狭いもの）です。いくつかの欠けている画像や何かがあり、それは少し流されますが、スクロールしてみてください。しかし、あなたが言及しているコンテンツの変化の頻度についてはわかりません。これは重大なパフォーマンスの問題を引き起こす可能性があります。しかしそれを試してみてください。

私はあなたが望むと思っている非常にcomlicatedを達成するための他の選択肢はないと思います。