【问题标题】：CSS blur on background image but not on content [duplicate]CSS模糊背景图像而不是内容[重复]
【发布时间】：2013-12-23 01:23:39
【问题描述】：

我做了this example。

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

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

【问题讨论】：

标签： css background-image blur

【解决方案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 添加和删除类以进行模糊和取消模糊。

【讨论】：

在做什么之前，究竟是什么？我看到没有 :before 过滤器也应用于整个内容。我明白这一点，但为什么 :before 防止这种情况发生？
@aless80 :before 被附加到所选项目（而:after 被附加）。与项目的直接子项的主要区别在于，:before 和 :after 只能通过 CSS 访问，并且必须使用 content 属性才能显示。
:before 和 :after 是伪元素。如果您编写.blur-bgimage:before {..}，您正在为.blur-bgimage 创建一个名为::before 的新子元素。因为它是.blur-bgimage 的孩子之一，所以它的属性（例如filter: blur(10px)）独立于其他兄弟姐妹。

【解决方案2】：

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

DEMO

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

【讨论】：

对不起，我没有在 div 上使用绝对值 :(
您可以在上传之前在photoshop中模糊背景图像，否则您将需要使用javascript。目前没有办法模糊一个 div，它的内容也只用 CSS 变得模糊。不幸的是，覆盖它们是唯一的方法。 blur.js 适合这种事情。
对不起，我不接受，因为在 Firefox 上它不起作用jsfiddle.net/jLGFp/3
您没有在问题中声明您需要 Firefox 支持。除非另有说明，否则假设该方法仅适用于受支持的浏览器。对于 Firefox 支持 blur 是不可能的。您将需要使用svg，这确实是一个不同的问题。它在这里覆盖css-plus.com/2010/05/…。

【解决方案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%;
}

【讨论】：

但这会在页面中创建一个滚动:(

【解决方案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%);

【讨论】：

【解决方案5】：

您要查找的是“backdrop-filter”属性，而不仅仅是“filter”。

示例：
背景滤镜：模糊（5px）； ✔️
过滤器：模糊（5px）； ❌

【讨论】：

【解决方案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 上。

【讨论】：

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