如何在文本上使用 css 背景过滤器？答案

【问题标题】：How to use css backdrop-filter on text?如何在文本上使用 css 背景过滤器？
【发布时间】：2020-01-27 16:59:46
【问题描述】：

我正在尝试从 Apples Aracde 网站重新创建这种效果： https://www.apple.com/apple-arcade/ 查看“Play Extraordinary”文本，它应用了背景滤镜并模糊了其背后的视频。

我可以看到他们使用 SVG 作为蒙版来剪辑背景，但我似乎不能这样做，文本被拉伸或倒置。

谁能告诉我如何使用文本作为 SVG 蒙版来剪切带有背景过滤器的 div/元素？

相关项目的屏幕截图： https://i.imgur.com/WHzO8Yj.png

【问题讨论】：

要求我们建议、查找或推荐书籍、工具、软件库、插件、教程、解释技术或提供任何其他场外资源的问题对于 Stack Overflow Stack 来说是题外话溢出
您使用的是哪个浏览器？你在使用 Safari 吗？我在 Chrome 或 Firefox 上看不到任何过滤效果。也许您可以在问题中添加屏幕截图。如果 Apple 更改该页面，这个问题可能会让未来的读者感到困惑。
嘿，是的，我使用的是 Safari，实际上 Chrome 上不存在这种效果。我在原帖中添加了一个截图，也许你可以看看那里:)
要求 anwerer 从头开始提供代码不是首选的 SO 方式。请显示您尝试过的代码，人们可以从那里提供帮助。

标签： html css svg

【解决方案1】：

据我所知，无法直接将`backdrop-filter:blur` 应用于文本元素。

第一个解决方案：最慢的一个

创建容器
为其（或其 ::before 伪元素）应用背景
使用 filter:blur 使容器的背景变得模糊
将 svg 蒙版应用到 svg 元素，然后将相同的背景应用到容器（或其 ::before 伪元素）

这样，我们在顶部有被遮罩的模糊背景，在它下面有非模糊版本。

注意：将背景应用于容器的 ::before 伪元素将允许您在不触摸 svg 蒙版的情况下修改背景（如果您需要翻转背景以创建更多对比度但您无法修改原始图像，则很有用）。

第二种解决方案：最快的解决方案

创建容器
为其应用背景
创建一个代表我们的“文本”的 svg 元素
将背景滤镜：模糊应用于 svg 元素
将 svg 掩码应用于 svg 元素

这样我们就有了如果背景过滤器：模糊可以应用于文本时的效果。
这是表现最好的一个，因为它是唯一的方法不需要 svg 元素复制背景（由于 background-attachment:fixed 属性，必须在每一帧重新绘制）。

第三种解决方案：最兼容的一个

（需要有2个背景副本，其中一个已经模糊）

创建容器
为其应用背景
创建一个代表“文本”的 svg 元素
将模糊版本的背景应用于 svg 元素
将 svg 掩码应用于 svg 元素

太棒了！但是对比度很低……

那就加个阴影吧！

单独应用模糊效果会给我们带来低对比度（难以阅读文本）。
为了解决这个问题，我在 svg 上应用了阴影：

在文档中创建一个 svg 元素
在<defs> 标签内创建一个带有<filter> 标签的过滤器，并给它一个唯一ID
在 <filter> 标记内创建一个 <feGaussianBlur> 和您选择的 stdDeviation（4 和 5 是很好的初始数字）
仍然在<filter> 标记内，创建一个<feComposite>，将out 运算符和in2 设置为SourceGraphics
为了塑造我们的影子，我们将在<defs> 标签之外使用<image>
将<image> 的filter 属性的url 设置为与<filter> 标签相同的ID（参见上面的第2 点）
将 xlink:href 属性的值设置为与您的 svg 路径相同的值

这是参考代码：

<svg>
  <defs>
    <filter id = "trans-shadow">
      <feGaussianBlur stdDeviation = "5"/>
      <feComposite operator = "out" in2 = "SourceGraphic"/>
    </filter>
  </defs>
  <image filter = "url(#trans-shadow)" x = "0" y = "0" width = "100%" height = "100%" xlink:href = "./SVG.svg" />
</svg>

Live DEMO：https://cristiandavideconte.github.io/applyBackdropFilterBlurToText/
源代码：https://github.com/CristianDavideConte/applyBackdropFilterBlurToText

我会给你一个代码sn- p 其中包含前 2 个解决方案（其中一个已注释），因此您可以选择哪个更适合您：

  <html>
  <head>
    <style>
        html,body {
            margin: 0;
            /* UNCOMMENT THIS PART TO TRY OUT THE NON-REVERSED VERSION
            background: url(https://wallpaperhd.wiki/wp-content/uploads/wallpapers-1920x1080-5ae1cd66635d3.jpg) 0 0;
            background-repeat: no-repeat;
            background-attachment: fixed;
            */
        }

        /* DELETE THE ::before TO TRY OUT THE NON-REVERSED VERSION */
        .container::before {
          content: "";
          z-index: -1;
          position: absolute;
          width: 100vw;
          height: 200vh;
          background: url(https://wallpaperhd.wiki/wp-content/uploads/wallpapers-1920x1080-5ae1cd66635d3.jpg) 0 0;
            background-repeat: no-repeat;
            background-attachment: fixed;
          transform: rotateY(180deg);
        }

        .container {
                width: 100vw;
                height: 200vh;
                display: flex;
                align-items: center;
        }

        .svg {
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 100%;

            /* DELETE THIS 4 LINES TO TRY OUT THE NON-REVERSED VERSION */
            filter: blur(20px) saturate(180%);
            background: url(https://wallpaperhd.wiki/wp-content/uploads/wallpapers-1920x1080-5ae1cd66635d3.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;

            /* UNCOMMENT THIS PART TO TRY OUT THE NON-REVERSED VERSION
            backdrop-filter: blur(20px) saturate(180%);
            */

            /* Chrome, Safari and all webkit browsers */
            -webkit-mask-image: url(./SVG.svg);
            -webkit-mask-size: contain;
            -webkit-mask-position: center;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-border: url(./SVG.svg) 25;

            /* FIREFOX */
            mask-image: url(./SVG.svg);
            mask-size: contain;
            mask-position: center;
            mask-repeat: no-repeat;
            mask-border: url(./SVG.svg) 25;
        }
    </style>
</head>

<body>
    <section class = "container">
        <div class = "svg"></div>
    </section>
</body>
</html>

为了让这个 sn-p 工作，您需要将 svg 掩码称为 SVG.svg，并且它必须与您的 html 文件放在同一文件夹中。

请记住您无法从本地存储中访问面具网址的 svg 文件，您需要一个服务器（node.js 很好）。

这里有可能结果的 2 个屏幕截图：

方法 3 - 没有阴影： 方法 2 - 带阴影：

【讨论】：