具有纯色背景的div内100％透明文本[重复]

【问题标题】：100% transparant text inside div with solid background [duplicate]具有纯色背景的div内100％透明文本[重复]
【发布时间】：2015-12-04 07:43:08
【问题描述】：

如何在具有纯色背景的 div 中显示 100% 透明的文本，以使背景在文本中可见？

所以我在正文上有一个背景图像，一个具有纯色背景色的 div，我希望文本 100% 透明，以便通过文本可以看到正文的背景图像。

我希望你知道我的意思：D

【问题讨论】：

如果文本是 100% 透明的，您只会看到背景颜色，您是在问如何将文本从背景中剪掉，这样您就可以看到字母应该在的间隙?
我认为您使用了错误的措辞，但您应该查看的功能是 opactity 或 background:rbga()

标签： html css text

【解决方案1】：

是的，可以使用background-clip:text --- 一个 css3 属性来完成。您还需要为文本添加背景图像。这将解决您的问题，但可能支持所有浏览器。

h1 {
  font-family:'...';
  font-size:25px;  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background:url(url/image.jpg);
  background-position:bottom;
  background-size:cover;
}

参考：https://scotch.io/tutorials/text-backgrounds-and-gradients-with-background-clip

另外，我在stackoverflow中发现了一个类似的帖子：Transparent text cut out of background

这太棒了：http://jsfiddle.net/JGPuZ/1/

【讨论】：