[解決済み] CSSのガラス／ぼかし効果をオーバーレイに適用するにはどうすればよいですか？

質問

半透明のオーバーレイDivにブラー効果を適用するのに苦労しています。このように、divの後ろにあるものをすべてぼかしたいのです。

以下は、動作しないjsfiddleです。 http://jsfiddle.net/u2y2091z/

これを動作させるために何かアイデアはありますか？できるだけシンプルにして、クロスブラウザに対応させたいと思っています。以下は、私が使っているCSSです。

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

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

解決方法は？

ここの皆さんからの情報と、さらにググって、ChromeとFirefoxで動作する下記を思いつきました。 http://jsfiddle.net/xtbmpcsu/ . IEとOperaで動作するようにするのはまだ先です。

重要なのは、コンテンツに 内部 を使用することで、フィルタの適用先である div の

body {
    background: #300000;
    background: linear-gradient(45deg, #300000, #000000, #300000, #000000);
    color: white;
}
#mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.5;
}
img {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
    position: absolute;
    left: 100px;
    top: 100px;
    height: 300px;
    width: auto;
}

<div id="mask">
    <p>Lorem ipsum ...</p>
    <img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

マスクにはフィルターが適用されていますね。また、url() を使っていることに注意してください。 <svg> タグを値に使うというもので、このアイデアは http://codepen.io/AmeliaBR/pen/xGuBr . もしCSSをminifyしているのであれば、SVGフィルターのマークアップにあるスペースを"%20"に置き換える必要があるかもしれません。

これで、マスク div 内のすべてがぼかされるようになりました。