Comment puis-je faire fonctionner un effet de verre / flou CSS pour une superposition?

J'ai pu rassembler des informations de tout le monde ici et plus loin sur Google, et j'ai trouvé ce qui suit qui fonctionne dans Chrome et Firefox: http://jsfiddle.net/xtbmpcsu/ . Je travaille toujours sur ce travail pour IE et Opera.

La clé consiste à placer le contenu à l' intérieur du div auquel le filtre est appliqué:

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

Et puis le CSS:

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;
}

Le masque a donc les filtres appliqués. Notez également l'utilisation de url () pour un filtre avec une <svg>balise pour la valeur - cette idée est venue de http://codepen.io/AmeliaBR/pen/xGuBr . Si vous réduisez votre CSS, vous devrez peut-être remplacer les espaces du balisage du filtre SVG par "% 20".

Alors maintenant, tout à l'intérieur du masque div est flou.