背景图像上的 CSS 模糊，但内容上没有
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20411257/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS blur on background image but not on content
提问by itsme
I did this example.
我做了这个例子。
I'm trying to blur the background image, but the main content is blurred too (the <span>)
我正在尝试模糊背景图像，但主要内容也模糊了（该<span>）
How can I blur the background without blurring the content?
如何在不模糊内容的情况下模糊背景？
采纳答案by Kevin Lynch
回答by Mike Lee
.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;
}
You can blur the body background image by using the body's :before pseudo class to inherit the image and then blurring it. Wrap all that into a class and use javascript to add and remove the class to blur and unblur.
您可以通过使用 body 的 :before 伪类继承图像然后模糊它来模糊 body 背景图像。将所有内容包装到一个类中，并使用 javascript 添加和删除该类以进行模糊和去模糊。
回答by TreeTree
Add another divor imgto your main divand blur that instead. jsfiddle
将另一个div或添加img到您的主要内容div并对其进行模糊处理。提琴手
.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%;
}
回答by JMercer
回答by John
backdrop-filter
backdrop-filter
Unfortunately Mozilla has really dropped the ball and taken it's time with the feature. I'm personally hoping it makes it in to the next Firefox ESR as that is what the next major version of Waterfox will use.
不幸的是，Mozilla 真的放弃了，花时间使用该功能。我个人希望它能够进入下一个 Firefox ESR，因为 Waterfox 的下一个主要版本将使用它。
MDN (Mozilla Developer Network) article: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
MDN（Mozilla 开发者网络）文章：https: //developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
Mozilla implementation: https://bugzilla.mozilla.org/show_bug.cgi?id=1178765
Mozilla 实现：https: //bugzilla.mozilla.org/show_bug.cgi?id=1178765
From the MDN documentation page:
从 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%);
