背景画像の特定の部分をぼかす

Question

私のサイトがレイヤーに関してこのように配置されているとします。

• 背景画像（background-size:cover;）半透明の背景が白の
• 500×500 DIV。
• div内のコンテンツ。

私が望むのは、（背景画像上の）divの下の領域がぼやけることです。私の問題は、さまざまな画面サイズでは、そのdivが常に背景と揃っているわけではないため、背景画像を「ぼかし前」にすることができないということです。

私の質問は、私がdivのように領域を定義して、その場で背景画像の特定の部分をぼかすことは可能ですか？たとえば、position:absolute; top:45% right:0;または私の最良のクロスブラウザオプションは何ですか？ CSSや他の賢明な、それは問題ではありません。私は背景わたってるしきdiv要素を持っていることについて考えて、以前にその背後にあるものと同じ背景画像にdiv要素について話しましたが、それは背景だ設定したサイドノートで

おかげ

---

フォアグラウンドのdivに一致する位置にして、それをぼかしてください。 psのようなプログラムで写真にズームしたり、ナビゲータにあるボックスは画像のその部分だけが表示されていることを指しています。

Answer 1

これは、あなたが何をしようとしてために少し重いかもしれませんが、あなたはBlur.js

$('.target').blurjs({ 
    source: 'body', 
    radius: 10, 
}); 

を使用することができますが、必要がある場合背景だけをぼかしたい場合は、チェックアウト：
https://stackoverflow.com/a/17134789/1947286

Answer 2

（divを使用して）1つの画像を別の画像と重ねて表示し、オーバーレイをぼかすことができます。

<div style="position: relative; background: URL(...)"> 

<div style="position: absolute; background: URL(...); 
     top: ...; left: ...; width: ...; height: ...; filter: blur(3px)"> 

アップデート：ここでは、それは完璧である：http://css-tricks.com/blurry-background-effect/