使用 CSS3 模糊 div 后面的内容答案

【问题标题】：Blur content behind a div using CSS3使用 CSS3 模糊 div 后面的内容
【发布时间】：2019-11-29 14:38:03
【问题描述】：

我在将模糊应用于绝对/固定元素的背景时遇到了问题，因为它似乎不会模糊页面的主要内容，只会模糊绝对元素本身的内容。我目前的警报样式如下：

.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);

}

我希望这会模糊警报元素的背景，使其背后的主要内容看起来很模糊（更多地关注元素本身），但即使确认这个问题根本存在，也没有找到任何东西.

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>

图片示例：

【问题讨论】：

你有问题，因为你没有给模糊的元素应用任何背景，所以没有什么可以模糊的。
@makshh 正如我在 OP 中所说，我希望模糊绝对元素的背景，以使半透明背景后面的内容模糊，而不是元素本身的任何类型的背景.
你的意思是这样的？ codepen.io/anon/pen/JYMQBW
@makshh 我可能没有很好地解释这一点，我会添加一些图片
@makshh 图片示例：img

标签： css

【解决方案1】：

最佳解决方案：

backdrop-filter: saturate(180%) blur(20px);

也可以在 webkit 中使用：

-webkit-backdrop-filter: saturate(180%) blur(20px);

【讨论】：

【解决方案2】：

我已经更新了你关于模糊内容的评论......这更好处理like this。

这会模糊背景和所有内容，但不会模糊警报。

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

.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%;
}

【讨论】：

我实际上希望模糊低于我的警报的内容，以便更多地关注警报本身，我在搜索时看到过几次这个解决方案，无论如何，谢谢。
我已更新以模糊除警报之外的所有内容。
不完全是，我会在OP中添加一些图像以使其更清晰
这在技术上是可行的，但在经济上是不可能的 :) 您需要创建内容的克隆，其大小恰好适合隐藏溢出的元素中的警报后面...并滚动到适当的位置。然后您可以模糊该克隆托管元素。那将是相当多的工作。
还不错，看来我得找点别的了。感谢您的回答。

【解决方案3】：

这听起来像是this question 的复制品。 CSS 模糊过滤器适用于元素本身；但是background-filter 是recently introduced in the webkit nightly。对于在当前浏览器中工作的回退——尽管使用画布——检查this answer.

【讨论】：

*背景过滤器