如何实现CSS玻璃/模糊效果用于叠加层？

Question

如何实现CSS玻璃/模糊效果用于叠加层？

190

我在尝试为一个半透明的覆盖层添加模糊效果时遇到了问题。我想要让该层后面的所有内容都模糊，就像这样：

这是一个无法工作的 jsfiddle 示例：http://jsfiddle.net/u2y2091z/

有什么办法可以使此方法可行吗？我希望保持尽可能简单，并且支持跨浏览器。以下是我使用的 CSS：

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}

- Chad Johnson

2

也许可以将该div设置为不透明，但使用伪元素作为其背景并独立进行模糊处理，以显示图像。 - bjb568

1

@chipChocolate.py CSS过滤器在默认情况下已经被FF35+支持。但是我同意你的观点，作为开发人员，我们不应该依赖它，因为它不是跨浏览器功能。 - Hashem Qolami

4

CSS滤镜现在已被大多数主流浏览器支持。 - Eric Reed

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amin · Answer 1

这是一个适用于固定背景的解决方案，如果您有一个固定的背景，并且有一些叠加元素需要模糊背景，那么这个解决方案可以使用：

假设我们有以下简单的HTML：

<body> <!-- or any wrapper -->
   <div class="content">Some Texts</div>
</body>

固定的背景可以应用在 <body> 或包含元素上：

body {
  background-image: url(http://placeimg.com/640/360/any);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

这里举个例子，我们有一个带有白色透明背景的叠加元素：

.content {
  background-color: rgba(255, 255, 255, 0.3);
  position: relative;
}

现在我们需要将外层包装器的完全相同的背景图像用于我们的叠加元素，我使用它作为一个 :before 伪类：

.content:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(5px);
  background-image: url(http://placeimg.com/640/360/any);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

自从固定背景在包装器和叠加元素中以相同的方式工作，我们可以将背景置于叠加元素的完全相同的滚动位置，并简单地模糊它。这是一个有效的fiddle，在Firefox、Chrome、Opera和Edge中进行了测试: https://jsfiddle.net/0vL2rc4d/。

注意：在Firefox中，存在一个错误，使得在滚动和有固定模糊背景的情况下屏幕会闪烁。如果有任何修复方法，请告诉我。

- Big Pee · Answer 2

我知道我的回答晚了，但这里有一个更好的解决方案来实现相同的效果。这也可以使文本模糊，并且在Chrome、Edge和Firefox上都能很好地工作。要实现此效果：

在父div上使用带有alpha为.8的RBGA颜色变量作为类
对div应用模糊效果
最后添加一些css过渡效果

.myBlur{
   background:rgba(252, 245, 235, .8);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   transition: background-color .3s cubic-bezier(.42, .00, .58, 1.00);
}

任何在此 div 下滚动的对象都将自动模糊不清。

- Luis miguel Armando · Answer 3

我不知道我在这里如何有用，但是这是一个可工作的小提琴，顺便说一下 https://jsfiddle.net/dqc59tfg/7/

#overlay {
width: 100vw;
height: 100vh;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(6px);

background:transparent;
background: transparent;


}
body {
    background: #300000;
    background: linear-gradient(45deg, #300000, #000000, #300000, #000000);
}


img {
    height: 100vh;
    width: 100vw;
    position: absolute;
    left: none;
    top: none;
}