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/

这是一个指向jsfiddle的链接。

- Jojo01

---

为我们添加一个 Fiddle。 - Jack hardcastle

这是 JSFiddle 的链接：http://jsfiddle.net/qy1sar8h/ - Jojo01

为什么要使用 #siteDesc:after 而不是 #siteDesc，实际上你想模糊哪一个？ - Selvamani

我希望它像模糊的玻璃一样覆盖在蓝色背景上，并在顶部放置文本。 - Jojo01

你可以像这样做：http://jsfiddle.net/xsLz0pb4/ - Nick R

是的，就是这样，请将其放在答案中。 - Jojo01

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: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);

除了Firefox（从Firefox 70开始，通过标志可用）和Internet Explorer之外，此功能在所有主要浏览器中都可用。

您尝试的技术会模糊应用到的元素的全部内容，而不仅仅是背景，这与您的意图不符。

我知道的唯一技术涉及使用定位的背景图像来伪造模糊效果，可以使用预先模糊的图像或利用filter CSS属性对原始图像进行模糊处理。我不使用这种技术，因为图像很容易错位，你的技巧看起来就不好看了。

- michaelward82

---

很有趣。这是我不知道的事情。 - Paulie_D

Answer 2

伪元素没有content属性就不会渲染，而且无论如何也不会使与之相关的父

变模糊。

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

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>

如果您将模糊应用于div本身，则会得到以下结果：JSFiddle演示 编辑：目前还不清楚这个效果是什么样的，但我看到唯一的选择是对背景进行模糊处理，而不是在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>

- Paulie_D

---

我希望它像模糊的玻璃一样覆盖在蓝色背景上，并在顶部放置文本。 - Jojo01