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

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

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

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

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

它用:

filter: blur(2px);

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

最佳答案

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

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/

关于css - css3 和 html 中背景模糊的弹出窗口，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29642055/