html - 如何使 CSS 玻璃/模糊效果适用于叠加层？

Question

我在对半透明叠加 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);
}

Answer 1

更简单和最新的答案:

backdrop-filter: blur(6px);

备注browser support并不完美，但在大多数情况下，模糊不是必需的。