如何在 HTML/CSS 中制作穿透透明文本？
我有一个 div，它有 css 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
I have a div which has css background: rgba(0, 0, 0, 0.85);. Centered in that div is the title of the page. I want to make the title see through (knockout, punch-through, however you want to call it. i.e. see past the div's background black to the background image of the page). The only method of doing that that I have come up with is using an image with the div's background and transparent text and seperate the header part into blocks.
/////////////////////////////////////////////// // (empty) // TITLE IMAGE // (empty) // ///////////////////////////////////////////////
The problem is that I dont know how to create the empty divs such that the image will remain centered (the empty divs need to be there to add the black background). Is there a different way to either do the see through text that doesnt have this problem or a way to center the image div with the empty divs?
EDIT: For an example of the effect that I am trying to achieve, look here:
http://www.showandtell-graphics.com/layer-knockout.html
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您不能直接执行此操作；为此，您应该使用图像，或者 svg 也可以解决这个问题，但这要复杂得多，而且浏览器并不都支持它。
you can not do this directly; You should use an image for this, or svg might do the trick but that's a hell of a lot more complicated and browsers do not all support it that well.
您应该能够执行此操作
将
background-image放在div上。默认情况下，
h1将是透明的。要使标题居中，请使用
text-align:center要使背景图像居中，可以使用
background-position:center示例： http://jsfiddle.net/jasongennaro/EQDZd/
You should just be able to do this
Place the
background-imageon thedivThe
h1will be transparent by default.To center the title, use
text-align:centerTo center the background image, you can use
background-position:centerExample: http://jsfiddle.net/jasongennaro/EQDZd/