CSS模糊背景图片但不模糊内容

Question

我做了这个例子。

我想要模糊背景图片，但是主要内容也会被模糊（<span>）。

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

- itsme

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伪类继承图像然后进行模糊处理来模糊化页面背景图像。将所有这些包装到一个类中，然后使用JavaScript添加和删除类以进行模糊和取消模糊。

- Mike Lee

---

“:before” 到底是做什么的？我发现没有 “:before”，筛选器也会应用到整个内容上。我理解这一点，但为什么 “:before” 可以防止这种情况发生呢？ - aless80

@aless80 :before被添加到所选项目之前（而:after则被添加到之后）。与直接子项的主要区别在于，:before和:after仅通过CSS访问，并且必须使用content属性才能显示。 - vintprox

:before和:after是伪元素。如果你写.blur-bgimage:before {..}，你就为.blur-bgimage创建了一个名为::before的新子元素。因为它是.blur-bgimage的子元素之一，所以它的属性（例如filter: blur(10px)）与其他兄弟元素无关。 - Kardaw

Answer 2

您可以像这样在模糊元素上方叠加一个元素

演示

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

- Kevin Lynch

---

抱歉，我不能在 div 上使用绝对值函数。 - itsme

你可以在上传前使用Photoshop模糊背景图像，否则你将需要使用JavaScript。目前没有办法仅使用CSS模糊一个DIV而不使其内容也变模糊。不幸的是，只有通过叠加它们才能实现。blur.js适用于此类操作。 - Kevin Lynch

抱歉，我拒绝了，因为在 Firefox 上它不起作用 http://jsfiddle.net/jLGFp/3/ - itsme

你在问题中没有说明需要火狐浏览器的支持。除非另有说明，否则假定该方法仅适用于支持的浏览器。对于火狐浏览器的支持，blur是不可能的。你需要使用一个svg，这实际上是一个不同的问题。这里有相关内容：http://css-plus.com/2010/05/how-to-add-a-gaussian-blur-effect-to-elements-within-firefox/。 - Kevin Lynch

Answer 3

在您的主要 div 中添加另一个 div 或 img 并对其进行模糊处理。 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%;
}

- TreeTree

---

但是这会在页面中创建一个滚动条 :( - Bruno Casali

Answer 4

背景过滤器

不幸的是，Mozilla在这个功能上拖了很久。我个人希望它能够进入下一个Firefox ESR，因为这是下一个主要版本的Waterfox将要使用的。

MDN（Mozilla开发者网络）文章：https://developer.mozilla.org/zh-CN/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%);

- John

Answer 5

你需要的是"backdrop-filter"属性，而不仅仅是"filter"。

示例：
backdrop-filter: blur(5px); ✔️
filter: blur(5px); ❌

- Francisco Jesus

Answer 6

jsfiddle.

<div> 
    <img class="class" src="http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465">
    </img>
    <span>
        Hello World!
    </span>
</div>

这样做怎么样？在div上不采用绝对定位，而是在img和span上应用绝对定位。

- JMercer

---

抱歉，这基本上就是@TreeTree所说的，忘记向下滚动了。 - JMercer

img 不应该是一个单一的标签吗？ - Tariqul Islam