如何使用文本“擦除”叠加层

Question

这有点难以解释，但我想制作一个以图片为背景的网站，并在图片上设置灰色叠加层。然后，我希望在叠加层上方放置一些文本，并且文本在哪里，灰色叠加层被删除，因此在没有灰色叠加层的情况下写入文本。

我在一年前用图像做了一个例子，但是如果可能的话，我想用CSS制作它。 这是一个例子（抱歉这个烂摊子，当时我真的不知道我在做什么） Example Page

具体而言，页面上最下方（最明显）的文字。

我真的希望不使用图像作为文本就可以做到这一点。

提前致谢！

Answer 1

CSS无法实现。你可以用SVG做到这一点：

Text with image background in svg or css