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

Question

我做了这个例子。

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

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




Answer 1

将另一个div或img添加到主div并将其模糊。JSFIDLE

.blur {
    background:url('http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465') no-repeat center;
    background-size:cover;
    -webkit-filter: blur(13px);
    -moz-filter: blur(13px);
    -o-filter: blur(13px);
    -ms-filter: blur(13px);
    filter: blur(13px);
    position:absolute;
    width:100%;
    height:100%;
}

Answer 2

你可以像这样在模糊的元素上覆盖一个元素

演示

div {
    position: absolute;
    left:0;
    top: 0;
}
p {
    position: absolute;
    left:0;
    top: 0;
}

Answer 3

JSFIDLE

.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;
}

你可以通过使用身体的：前伪类来继承图像，然后模糊它来模糊身体背景图像。将所有这些打包到一个类中，并使用javascript添加和删除类来模糊和取消模糊。