css - css3 和 html 中背景模糊的弹出窗口

Question

您好，此示例显示了基本效果 - 单击“单击此处”，模糊背景上会出现一个弹出窗口。

http://codepen.io/Palestinian/pen/mDKkG

我尝试创建一个极简版本:

http://jsfiddle.net/c2wxbey4/1/

它使用:

filter: blur(2px);  

该图层能够模糊图层内的文本，但不能模糊背景文本。

Answer 1

这是一种模糊除部分之外的所有内容的方法...

http://jsfiddle.net/c2wxbey4/9/

body :not(#unblurred) {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);    
}

如果我将内容放入#unblurred 中，它就不起作用:

http://jsfiddle.net/c2wxbey4/10/

纠正这个问题的选择器是

body :not(#unblurred), body :not(#unblurred) * {
    -webkit-filter: blur(2px);
    filter: blur(2px);    
}

编辑:我无法让你的修复工作: http://jsfiddle.net/c2wxbey4/14/