创建CSS磨砂玻璃效果的两种方法

在本教程中，我将向您展示如何在 css 中创建毛玻璃效果。您已经在 UI（用户界面）（例如 macOS 和 ios，甚至现在的 Windows）中看到了这种玻璃模糊效果，因此玻璃背景绝对是一种趋势效果。

网站中的毛玻璃或玻璃模糊可以使用 CSS 进行模拟。在本教程中，我将向您展示两种方法。

方法一

第一种方法具有相当广泛的浏览器支持，但它比我们将要介绍的第二种方法需要更多的 CSS。

首先创建一个具有.container. 我们将使用它来表示我们的磨砂玻璃板。然后，将背景图像应用到 body 元素。在此背景下，您需要申请：

我们这样做是因为 body 的子节点继承了这个背景图像，并且我们希望保持它的大小相同。

在我们的 上创建一个伪元素.container，这将给我们提供模糊的玻璃。因此，我们应用以下内容：

这给了我们一个覆盖容器元素的元素。现在是时候添加一些颜色了，我们将使用 box-shadow 来完成：

为了给我们一个磨砂效果，为了模糊玻璃，我们添加了一个模糊滤镜：

这为我们提供了大部分我们想要的东西，但还没有完全实现。我们现在需要（如前所述）为伪元素及其父元素设置继承的背景。

通过更多可选的调整，最终结果如下：

See the Pen  How to Create a Frosted Glass Effect in CSS - Method 1 by Envato Tuts+ (@tutsplus)  on CodePen.

方法二

现在提供一种替代的模糊玻璃方法，它使用较少的 CSS 背景过滤器样式，但也享有较少的浏览器支持。

我们从相同的.container元素开始，并将相同的封面背景图像应用于 body 元素。

然后我们将注意力转向一个名为backdrop-filter. 我们首先在 .container 中添加一些显示样式，包括我们喜欢的任何背景颜色（让我们选择淡白色）：

然后我们添加过滤器（您可能需要为您的浏览器添加适当的前缀，或者如果您在 Codepen 中，只需检查 autoprefixer）。

而已！使用模糊值来获得您想要的效果，但没有其他需要。这是给你的：

See the Pen  How to Create a Frosted Glass Effect in CSS - Method 2 by Envato Tuts+ (@tutsplus)  on CodePen.

结论

如果您正在寻找可以在网页中使用的玻璃背景效果，那么这两种方法是一个很好的起点。

使用第二种方法的缺点是浏览器支持不佳。现在你可以期待 Edge 和 safari 支持 css 背景过滤器，但仅此而已。