CSS模糊背景图像,但不是内容

Question

我做了这个例子.

我试图模糊背景图像,但主要内容也是模糊的(<span>)

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

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的:在伪类之前模糊身体背景图像以继承图像,然后模糊它.将所有内容包装到一个类中并使用javascript添加和删除类以模糊和unblur.

Answer 2

您可以像这样覆盖模糊元素上方的一个元素

DEMO

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

Answer 3

添加另一个div或img您的主要,div并模糊相反.的jsfiddle

.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 4

backdrop-filter

不幸的是，Mozilla 确实失败了，并花了很多时间来开发这个功能。我个人希望它能出现在下一个 Firefox ESR 中，因为 Waterfox 的下一个主要版本将使用它。

MDN（Mozilla 开发者网络）文章：https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Mozilla 实现：https://bugzilla.mozilla.org/show_bug.cgi? id=1178765

来自 MDN 文档页面：

/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

Answer 5

您正在寻找的是“backdrop-filter”属性，而不仅仅是“filter”。

\n

示例：\n
\n背景过滤器：模糊(5px); \xe2\x9c\x94\xef\xb8\x8f\n
\n过滤器：模糊（5px）；\xe2\x9d\x8c

\n