logo标签列表

使用CSS3在div后面模糊内容

css
6
我在将模糊应用于绝对/固定元素的背景时遇到了问题，因为它似乎只能模糊绝对元素本身的内容，而不能模糊页面的主要内容。我目前的警报样式如下所示：
.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

正如我在 OP 中说的那样，我想模糊绝对定位元素的背景，使半透明背景后面的内容变得模糊，而不是任何元素本身的背景。 - Necrone
你是说像这样的吗？http://codepen.io/anon/pen/JYMQBW - max
@makshh 我可能没有很好地解释清楚，我会添加一些图片。 - Necrone
@makshh 图片示例：img - Necrone
https://dev59.com/32Eh5IYBdhLWcg3wdjPt - max
显示剩余2条评论
3个回答
11

最佳解决方案：

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

也适用于 Webkit：

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

针对您有关模糊内容的评论，我已更新如下：点击此处查看。

这将使背景和所有内容变模糊，但不会影响警告提示。

输入图像描述

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%;
}
我实际上想要模糊掉警报以下的内容，以便更多地关注警报本身。虽然我在搜索时看到过这个解决方案，但还是谢谢你。 - Necrone
我已经更新了代码，使得除了警告框以外的所有内容都被模糊处理。 - Fenton
不完全是，我会在原帖中添加一些图片，希望能使它更加清晰。 - Necrone
这在技术上是可行的，但经济上不现实 :) 你需要创建一个内容的克隆体，大小恰好适合警报后面的元素，并带有溢出隐藏...并滚动到适当的位置。然后，您可以模糊该托管元素的克隆体。那将需要相当多的工作。 - Fenton
好的，看来我得找别的东西了。谢谢你的回答。 - Necrone
0

这听起来像是这个问题的重复。CSS模糊滤镜应用于元素本身；然而background-filter最近在webkit夜间版中引入。对于在当前浏览器中工作的备用方案 - 尽管使用画布 - 请查看此答案。

背景过滤器 - vikrant
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接