我在半透明叠加div上应用模糊效果时遇到问题.我希望div后面的所有内容都被模糊，如下所示:
下面是一个不起作用的JSFIDLE: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的内容inside:
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>值标记的过滤--这个 idea 来自http://codepen.io/AmeliaBR/pen/xGuBr.如果您碰巧缩小了css，您可能需要将svg过滤标记中的所有空格替换为"%20".
所以现在，遮罩div内的所有东西都是模糊的.