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

Question

我有一个有css的div background: rgba(0, 0, 0, 0.85);.以div为中心是页面的标题.我想让标题看透(淘汰赛,穿透,但是你想要调用它.即看到过去div的背景黑色到页面的背景图像).我想出的唯一方法就是使用带有div背景和透明文本的图像,并将标题部分分成块.

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

问题是,我不知道如何来创建空的div使得图像将保持居中(空的div需要在那里加入了黑色背景).是否有不同的方法可以看到没有这个问题的透视文本或者使用空div来使图像div居中？

编辑:有关我想要实现的效果的示例,请查看此处:http: //www.showandtell-graphics.com/layer-knockout.html

Answer 1

您不能直接执行此操作；为此，您应该使用图像，或者 svg 也可以解决这个问题，但这要复杂得多，而且浏览器并不都支持它。