Question

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

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

图片示例：

example

Answer 1

我已更新此内容，以便您对有关内容模糊的评论...处理得更好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%;
}

Answer 2

这听起来像是this question的副本。 CSS模糊过滤器适用于元素本身;但是background-filter是recently introduced in the webkit nightly。对于适用于当前浏览器的后备 - 尽管使用画布 - 请检查this answer.

Answer 3

最佳解决方案：

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

在Webkit中也可用：

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

使用CSS3模糊div后面的内容

3 个答案: