CSS 使用 CSS3 模糊 div 后面的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33267597/
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
Blur content behind a div using CSS3
提问by Necrone
I've encountered a problem with applying blur to the background of absolute/fixed elements, as it does not seem to blur the main content of the page, only the content of the absolute element itself. I currently have the styling for my alert as following:
我遇到了将模糊应用于绝对/固定元素的背景的问题，因为它似乎不会模糊页面的主要内容，只会模糊绝对元素本身的内容。我目前的警报样式如下：
.alert-wrap {
position: fixed;
z-index: 10;
right: 0;
bottom: 0;
}
.alert-wrap .alert {
display: block;
background-color: rgba(215, 44, 44, 0.5);
margin: 0 15px 15px 0;
position: relative;
}
.alert-wrap .alert:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
I'm looking to have this blur the background of the alert element, making the main content behind it seem blurred (applying more focus on the element itself), but have not managed to find anything even confirming this issue exists at all.
我希望让警报元素的背景变得模糊，使其背后的主要内容看起来模糊（更多地关注元素本身），但即使确认这个问题存在，也没有设法找到任何东西。
HTML document flow is as follows:
HTML文档流程如下：
<html>
<head>
<!-- Header Stuff Deleted -->
</head>
<body>
<div class='alert-wrap'>
<div class='alert'>
<div class='head'>
Notifications
</div>
<div class='body'>
Alert content here
</div>
</div>
</div>
<?php
//constructing navbar
?>
<div class='content'>
Some content here
</div>
<?php
//constructing footer
?>
</body>
</html>
Image example:
图片示例：
回答by Fenton
I have updated this for your comment about blurring the content... this is better handled like this.
我已经更新了这个你对模糊的内容评论...这是更好地处理这样的。
This will blur the background and all content, but not the alert.
这将模糊背景和所有内容，但不会模糊警报。
HTML:
HTML：
<div id="alert">
Lorum Ipsum Delorum Alert!
</div>
<div class="content" id="example">
Blah Blah Blah Blah Blah Blah Blah Blah Blah
<div onclick="document.getElementById('example').className='alerting';document.getElementById('alert').style.display='block';">Go</div>
</div>
CSS
CSS
.content {
}
.alerting {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
#alert {
display: none;
width: 300px;
height: 100px;
position: fixed;
top: 100px;
left: 0;
text-align: center;
width: 100%;
}
回答by Dre
This sounds like a duplicate of this question. The CSS blur filter applies to the element itself; however background-filterwas recently introduced in the webkit nightly. For a fallback that works in current browsers -- albeit using canvas -- check this answer.
这听起来像是这个问题的重复。CSS 模糊过滤器适用于元素本身；然而最近在 webkit nightly 中background-filter被引入。对于在当前浏览器中工作的后备——尽管使用画布——检查这个答案。
回答by Marton
Best solution:
最佳解决方案：
backdrop-filter: saturate(180%) blur(20px);
Also available in webkit:
也可在 webkit 中使用：
-webkit-backdrop-filter: saturate(180%) blur(20px);
