使用 CSS 滤镜制作磨砂玻璃效果

虽然对比度、饱和度和模糊等滤镜在图像编辑器中已经存在了一段时间，但在网络上实现它们历来需要提供已经应用了这些滤镜的图像。 随着浏览器开始将滤镜作为 Web 平台的一部分来整合，我们可以开始将复杂的视觉效果分解为它们的组成部分，并在网络上实现它们。 本文将研究一种这样的效果，磨砂玻璃，以及 CSS 滤镜如何提供比静态图像更清洁、更灵活的解决方案。

老派：使用图像制作磨砂玻璃效果

磨砂玻璃效果在互联网上已经存在了一段时间；我们甚至在 2008 年的 CSS-Tricks 上看到了它 back in 2008。 该效果背后的理念很简单：只需模糊并淡化覆盖内容后面的区域。 内容与其背景获得更高的对比度，但您仍然可以大致了解背景上的内容。 CSS-Tricks 文章使用了两张图片：标准版本和磨砂版本（模糊并带白色色调）。 在我们的示例中，卡片向上滑动以显示内容，同时对背景进行磨砂处理。

演示

查看 CodePen 上 betravis (@betravis) 制作的笔 使用多张图片制作的磨砂玻璃效果。

HTML

标记非常简单。 我们只有一个包含内容的文章。

<article class="glass down">
  <h1>Pelican</h1>
  <p>additional content...</p>
</article>

CSS

我们首先将所有内容的大小调整为视窗。 然后，我们在原始背景之上叠加模糊的背景版本。 最后，我们添加白色色调。 溢出隐藏，以防止滚动并将效果裁剪到 .glass 元素。

html, body, .glass {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    background-image: url('pelican.jpg');
    background-size: cover;
}
.glass::before {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('pelican-blurry.jpg');
    background-size: cover;
    content: ' ';
    opacity: 0.4;
}
.glass {
    background-color: white;
}

上面的 CSS 将创建我们的模糊和淡化叠加层。 我们还需要将叠加层向下移到页面底部，只留出足够的空间来查看标题文本。 由于模糊图像是在叠加层的子元素中，我们还需要将其向上移动相反的距离，以便将其与主体背景保持一致。 由于演示使用的是过渡，我选择使用 CSS 转换而不是 background-attachment 属性，因为 CSS 转换可以进行硬件加速。

.glass.down {
    transform: translateY(100%) translateY(-7rem);
}
.glass.down::before {
    transform: translateY(-100%) translateY(7rem);
}
.glass.up, .glass.up::before {
    transform: translateY(0);
}

笔记

以上技术很简单，并且具有良好的浏览器支持。 尽管我使用 过渡 对演示进行了稍微修饰，但其他所需功能（生成内容、不透明度、转换 和 背景大小）都具有良好的浏览器支持，可以追溯到 IE 9（除了 Opera Mini）。

新派：使用滤镜制作磨砂玻璃效果

重复图像技术要求维护模糊图像和原始图像，如果您需要为多个图像重复使用该效果，这会很麻烦。 例如，响应式设计可能需要在不同的屏幕尺寸下交换不同的图像。 或者，模板布局可能会动态地插入图像（例如，每个博客文章使用不同的标题图像）。 对于这些情况，如果只使用源图像就能生成效果会很棒。 毕竟，我们只是模糊了它。

这就是 CSS 滤镜大显身手的地方。 它们允许我们在浏览器中使用 CSS filter 属性 应用模糊效果。

CSS

我们可以调整磨砂玻璃叠加层的 CSS，使其成为应用了 blur 滤镜的原始图像。

.glass::before {
    background-image: url('pelican-blurry.jpg');
}

.glass::before {
    background-image: url('pelican.jpg');
    filter: blur(5px);
}

演示

查看 CodePen 上 betravis (@betravis) 制作的笔 使用滤镜效果制作的磨砂玻璃效果。

注意事项

很简单，对吧？ 不幸的是，CSS 滤镜相对较新。 这意味着它们可能带有供应商前缀，并且它们的 浏览器支持 还没有普及。 但是，滤镜在 SVG 中有更长的历史，并且通过 CSS 将 SVG 滤镜应用于 HTML 内容 具有更广泛的浏览器支持。 您只需将它们添加为 CSS 滤镜不支持时的后备选项即可。 上面的演示实际上就是这么做的。

要添加 SVG 滤镜，我们在 HTML 标记中包含一些内联 SVG，并使用 url() 引用滤镜。 专业提示：另一种选择是编码 SVG 滤镜并将其引用为数据 URL，但这种格式在文章中有点难以阅读。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>
</svg>

.glass::before {
    background-image: url('pelican.jpg');
    /* Fallback to SVG filters */
    filter: url('#blur');
    filter: blur(5px);
}

仍然会有一些情况，浏览器不支持 CSS 或 SVG 滤镜。 在这种情况下，用户将在淡化（带色调但未模糊）的背景上看到文本，这还不错。

结论

滤镜允许我们在浏览器中使用以前仅在图像编辑器中可用的效果。 作为元素的样式，而不是渲染的图像，它们更容易修改和重复使用。 您可以在当前版本的 Chrome、Safari 和 Opera 中使用 CSS 滤镜，并且它们正在 Firefox 中积极开发（目前还没有关于 Internet Explorer 的消息）。 只要对后备行为稍加注意，您就可以从今天开始使用它们。