如何在文本上使用CSS背景过滤器？
我正在尝试从 Apples Aracde 网站重新创建此效果： https://www.apple.com/apple-arcade/ 看看“Play Extraordinary”文本，它应用了背景滤镜并模糊了其后面的视频。
我可以看到他们使用 SVG 作为遮罩来剪辑背景，但我似乎无法这样做，文本会被拉伸或颠倒。
谁能告诉我如何使用文本作为 SVG 蒙版来剪切带有背景滤镜的 div/元素？
相关项目的屏幕截图： https ://i.stack.imgur.com/wsxSe.png
据我所知，没有办法直接将 应用于backdrop-filter:blur文本元素。
第一个解决方案：最慢的解决方案（被 chrome 更新破坏）
创建一个容器对其应用背景（或对其 ::before 伪元素）使用filter:blur使容器的背景变得模糊将 svg 蒙版应用到 svg 元素上，然后将相同的背景应用到容器（或其 ::before 伪元素）
这样，我们就可以在顶部获得模糊背景，并在其下方获得非模糊版本。
注意：将背景应用到容器的 ::before 伪元素将允许您修改背景而无需触摸 svg 蒙版（如果您需要翻转背景以创建更多对比度但无法修改原始图像，则非常有用）。
第二种解决方案：最快的解决方案
- 创建一个容器
- 为其应用背景
- 创建一个 svg 元素来代表我们的“文本”
- 将background-filter:blur应用到svg元素
- 将 svg-mask 应用于 svg 元素
这样我们就可以得到将background-filter:blur 应用于文本时所得到的效果。
这是性能最好的方法，因为它是唯一不需要 svg 元素复制背景的方法（由于背景附件：固定属性，必须在每一帧重新绘制背景）。
第三种解决方案：最兼容的一种（被 chrome 更新破坏）
（需要有 2 份背景副本，其中一份已经模糊）
创建一个容器为其应用背景创建一个 svg 元素来表示“文本”将背景的模糊版本应用到 svg 元素将 svg-mask 应用于 svg 元素
伟大的！但对比度很低...
那么我们来添加一个阴影吧！
单独应用模糊效果会给我们带来低对比度（难以阅读文本）。
为了解决这个问题，我对 svg 应用了阴影：
- 在文档中创建一个 svg 元素
- 在标签内
<defs>创建一个带有<filter>标签的过滤器并给它一个唯一的id - 在标签内
<filter>创建一个<feGaussianBlur>带有stdDeviation您选择的 a （4 和 5 是很好的初始数字） - 仍在标签内，使用运算符
<filter>创建一个并设置为<feComposite>outin2SourceGraphics - 为了塑造我们的阴影，我们将使用标签
<image>的外部<defs> url将的<image>属性设置filter为您为标签提供的相同 ID<filter>（请参阅上面的第 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>
现场演示： https: //cristiandavideconte.github.io/applyBackdropFilterBlurToText/
源代码：https://github.com/CristianDavideConte/applyBackdropFilterBlurToText
我将给您留下一个代码片段，其中包含前 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>
为了使此代码片段正常工作，您需要将 svg 蒙版命名为 SVG.svg，并且必须将其放置在与 html 文件相同的文件夹中。
请记住，您无法从本地存储访问掩码网址的 svg 文件，您需要一个服务器（node.js 就可以）。
这里有2 个可能结果的屏幕截图：
方法 3 - 无阴影：
方法 2 - 使用阴影：
| 归档时间： |
|
| 查看次数： |
7744 次 |
| 最近记录： |