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

Webkit引入了一个实验background-filterCSS属性，可以实现毛玻璃外观。

有关完整的详细信息，请参见此处的博客文章：https : //www.webkit.org/blog/3632/introducing-backdrop-filters/。

它被提议为CSS滤镜效果模块2级的一部分，其非前缀语法如下：

backdrop-filter: blur(10px);

目前仅在WebKit每晚构建中可用。

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

我所见过的唯一广泛使用的技术是使用预先模糊处理的图像或使用filterCSS属性来模糊原始图像，并使用定位的背景图像来对其进行伪造。我不使用此技术，因为图像很容易失准并且您的技巧看起来不再好。