背景图像上的 CSS 模糊，但内容上没有

Question

<分区>

Answer 1

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 添加和删除类以进行模糊和去模糊处理。