如何在HTML/CSS中制作透明的穿孔文字？

Question

我有一个div，它的css属性是 background: rgba(0, 0, 0, 0.85);。在该div中心位置有页面标题。我想让标题透过背景黑色看到页面的背景图片（也就是所谓的打孔效果）。我唯一想到的方法是使用带有div背景和透明文本的图像，并将标题部分分成块来实现。

///////////////////////////////////////////////
//  (空)  //  标题图像   //  (空)  //
///////////////////////////////////////////////

问题是我不知道如何创建这些空的div，使图像保持居中（需要这些空的div来添加黑色背景）。是否有其他方法来实现打孔文本而不会出现这个问题，或者有没有办法使图像div与空div居中对齐？

编辑：要查看我尝试实现的效果示例，请参见此处：http://www.showandtell-graphics.com/layer-knockout.html

- chacham15

---

可能还可以参考https://dev59.com/x0zSa4cB1Zd3GeqPjQ8S#2289440 - Paul D. Waite

Answer 1

你不能直接这样做；你应该使用图像，或者SVG可能会奏效，但那要复杂得多，并且浏览器并不都很好地支持它。

- cmplieger

---

这就是为什么我说我正在使用一张图片，问题是：如何让图片保持居中，并使两侧的div填充空间（以显示背景）？ - chacham15

没关系，这与问题无关，谢谢。 - chacham15

Answer 2

你应该可以轻松地做到这一点

<div> 
    <h1>Title</h1>
</div>

将 background-image 放置在 div 上

h1 默认情况下将是透明的。

要居中标题，请使用 text-align:center

要居中背景图像，可以使用 background-position:center

示例： http://jsfiddle.net/jasongennaro/EQDZd/

- Jason Gennaro

---

我觉得你误解了我所说的透明。我在问题中添加了一个例子。 - chacham15

那个例子解释得很清楚，@chacham15。我不确定仅使用CSS是否可能。为什么不直接创建带有透明文本的图像并将其设置为h1？ - Jason Gennaro

这就是为什么我说我正在使用一张图片，问题是：如何让图片保持居中，并使两侧的div填充空间（以显示背景）？ - chacham15