Apple Arcade 的登录页面有一个很酷的效果，其中一些“白色”文字具有半透明效果。您可以透过文字看到其背后的背景颜色。它不像 剔除文字 那样，您可以看到确切的背景。在这种情况下，下方播放的是实时视频。就像您模糊视频，然后透过字母显示模糊视频一样。
好吧，这就是实际发生的事情。
以下是一个视频，这样您就可以看到它在行动中（即使在他们更改该页面或您使用不支持该效果的浏览器之后）
嘿，如果您不喜欢这种效果，那也没关系。本文的其余部分是对如何实现该效果的技术探索，并非关于何时以及如何使用它的声明。
这里有两个主要属性，它们必须完美地协同工作才能实现这一点。
backdrop-filter 属性非常易于使用。设置它，它就可以过滤透过该元素看到的任何背景。
查看 Pen
背景过滤器的基本示例 by Chris Coyier (@chriscoyier)
在 CodePen 上。
接下来，我们将把文字放在该容器中，但实际上我们会隐藏它。它只需要存在以确保可访问性。但是，我们将通过对文字进行裁剪路径来替换文字。没错！我们将使用 SVG <text> 在 <clipPath> 元素内部，然后使用它来裁剪具有 backdrop-filter 的整个元素。
查看 Pen
带有模糊背景的文字 by Chris Coyier (@chriscoyier)
在 CodePen 上。
出于某种原因（我认为是错误），Chrome 这样渲染它。
它无法正确裁剪元素，即使它据说支持这两个属性。我尝试使用 @supports 块，但这在这里没有帮助。看起来 Apple 的网站在其 <html> 元素（Modernizr 样式）上有一个 .no-backdrop-blur 类，该类在 Chrome 上设置以完全避免使用该效果。我只是让我的演示崩溃。也许有一天它会被修复。
它在 Safari 中看起来是正确的。
而 Firefox 目前不支持 backdrop-filter，因此 @supports 块会执行其操作，并向您显示白色文字。
感谢您撰写本文！
好吧，除了 Safari 之外，它在任何地方都无法正常工作。好吧。
这里有一个很棒的示例页面！
只是一个小提醒，Chrome 的问题是一个已知的错误，已在 Chrome 77 中修复，该版本将在下周左右发布到稳定版。有关更多详细信息，请参见 https://crbug.com/974857。
此外，它在 Chrome 中不适用于 overflow-hidden，并且在 Safari 和 Chrome 中都忽略了 border radius 与 overflow hidden 的组合。
请参见：https://codepen.io/jstrst/pen/yLBZYyv
很棒，喜欢它
关于 Pixelofficer 提出的 overflow-hidden 问题，您说得对，这看起来像是错误。我已在此处捕获它：https://crbug.com/1009155。我修改了您的示例，但如果您遇到的是这个问题，请告诉我。
是的，就是这样......感谢您提交：）
此外，MacOS 上的 Chrome 也不同......当与 overflow-hidden 结合使用时，完全忽略了背景过滤器，因此裁剪可以正常工作：）
也许可以在错误本身中进行评论......但是背景过滤器应该在 MacOS 上的 Chrome 中正常工作。Chrome 76 中存在一个与遮罩相关的错误，但从 Chrome 77 开始，一切应该都很好。我很想知道您在这里指的是什么。
已在那里发送回复并附上屏幕截图......