CSS 在背景图像上模糊，但在内容上不模糊 [重复]

I did 这个例子.

我试图模糊背景图像，但主要内容也模糊了（<span>)

如何在不模糊内容的情况下模糊背景？

jsfiddle

.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width : 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter        : blur(10px);
    -moz-filter   : blur(10px);
    -webkit-filter: blur(10px);
    -o-filter     : blur(10px);

    transition        : all 2s linear;
    -moz-transition   : all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition     : all 2s linear;
}

您可以通过使用 body 的 :before 伪类来继承图像，然后对其进行模糊处理，从而对 body 背景图像进行模糊处理。将所有这些包装到一个类中，并使用 javascript 添加和删除该类以进行模糊和取消模糊。