html - Css 模糊玻璃效果滤镜不起作用

Question

我正在尝试使用滤镜制作一个 css 模糊玻璃效果，但它没有按应有的方式工作。 div 完全没有不透明度，也不模糊。 代码(CSS):

#siteDesc
{
    text-align: center;
    background-color: #FFFFFF;
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
    padding: 10px;
    padding-bottom: 20px;
    border-radius: 5px;
}
#siteDesc:after
{
    opacity: 0.7;
    filter: blur(1px);
    -moz-filter: blur(1px);
    -webkit-filter: blur(1px);
    -o-filter: blur(1px);
}

编辑:

jsfiddle 链接:http://jsfiddle.net/qy1sar8h/

Answer 1

相关性更新于 2021 年 9 月

有一个 backdrop-filter CSS 属性可以实现毛玻璃外观。

参见 https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter了解全部详情。

它是 CSS Filter Effects Module Level 2 的一部分，模糊滤镜的语法如下:

backdrop-filter: blur(10px);

元素的背景会被模糊，但内容或后代元素不会。

要创建磨砂玻璃效果，请将此属性与 RGBA 背景颜色相结合，使背景具有一定的透明度，例如:

background-colour: Reba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);

除 Firefox(在 Firefox 70 的标志后可用)和 Internet Explorer 之外，所有主要浏览器都提供此功能。

您尝试的技术会模糊应用它的任何元素的全部内容，而不仅仅是您想要的背景。

我所知道的唯一技术涉及使用预先模糊的图像或利用 filter CSS 属性模糊原始图像来伪造定位背景图像的模糊。我不使用这种技术，因为图像很容易不对齐，而且你的技巧看起来不再好看。