html - 如何在 HTML/CSS 中制作穿透透明文本？

Question

我有一个包含 css background: rgba(0, 0, 0, 0.85); 的 div。该 div 的中心是页面的标题。我想让标题看透(挖空，穿通，但是你想调用它。即看到 div 的背景黑色到页面的背景图像)。我想出的唯一方法是使用带有 div 背景和透明文本的图像，并将标题部分分成 block 。

/////////////////////////////////////////////////  (empty)    //  TITLE IMAGE //   (empty)  /////////////////////////////////////////////////

问题是我不知道如何创建空的 div 以使图像保持居中(空的 div 需要在那里添加黑色背景)。是否有不同的方法来完成没有此问题的透视文本或将图像 div 与空 div 居中的方法？

编辑:有关我试图达到的效果的示例，请看这里: http://www.showandtell-graphics.com/layer-knockout.html

Answer 1

你不能直接这样做；您应该为此使用图像，或者 svg 可能会起到作用，但这要复杂得多，而且浏览器并不都支持它。