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

编辑：

Link 到 jsfiddle：http://jsfiddle.net/qy1sar8h/

Answer 1

如果没有 content 属性，伪元素将不会呈现，并且在任何情况下都不会模糊关联的父元素 div。

对伪元素应用过滤器只会模糊伪元素的内容。

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

<div id="siteDesc">
  <p>Hello, this is my fiddle.</p>
</div>

如果您将 blur 应用于 div 本身，您会得到：JSFiddle Demo

编辑： 尚不完全清楚应该看起来如何，但我看到的唯一选项是模糊 background 不是 div 元素本身的背景，而是用伪元素模拟背景。

body {
  background-color: #37E1E4;
}
#siteDesc {
  text-align: center;
  width: 90%;
  margin: 10px auto;
  margin-top: 30px;
  padding: 10px;
  padding-bottom: 20px;
  border-radius: 5px;
  position: relative;
  font-weight:bold;
}
#siteDesc:before {
  content: '';
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: blur(1px);
          filter: blur(1px);
  background-color: rgba(255,255,255,0.7);
  z-index:-1;
}

<div id="siteDesc">
  <p>Hello, this is my fiddle.</p>
</div>

Answer 2

相关性已于 2021 年 9 月更新

有一个backdrop-filterCSS属性可以实现磨砂玻璃效果

有关详细信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter。

它是 CSS 滤镜效果模块级别 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 属性来模糊原始图像并使用定位背景图像伪造模糊。我不使用这种技术，因为图像很容易不对齐，而且你的技巧不再好看。

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

Css blurry glass effect filters not working

html

css

blur

opacity