【问题标题】: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 应用于文本元素。



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

  1. 创建容器
  2. 为其(或其 ::before 伪元素)应用背景
  3. 使用 filter:blur 使容器的背景变得模糊
  4. 将 svg 蒙版应用到 svg 元素,然后将相同的背景应用到容器(或其 ::before 伪元素)

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

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

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

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

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

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

(需要有2个背景副本,其中一个已经模糊)

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

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

那就加个阴影吧!

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

  1. 在文档中创建一个 svg 元素
  2. <defs> 标签内创建一个带有<filter> 标签的过滤器,并给它一个唯一ID
  3. <filter> 标记内创建一个 <feGaussianBlur> 和您选择的 stdDeviation(4 和 5 是很好的初始数字)
  4. 仍然在<filter> 标记内,创建一个<feComposite>,将out 运算符和in2 设置为SourceGraphics
  5. 为了塑造我们的影子,我们将在<defs> 标签之外使用<image>
  6. <image>filter 属性的url 设置为与<filter> 标签相同的ID(参见上面的第2 点)
  7. 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 DEMOhttps://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 - 带阴影:

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-05-24
    • 1970-01-01
    • 1970-01-01
    • 2021-11-11
    相关资源
    最近更新 更多