div内的100％transparant文​​本具有纯色背景

Question

如何在具有纯色背景的div中显示100％透明文本，以便在文本中看到背景？

所以我身体上有一个背景图片，一个背景色为实色的div，我希望文字是100％透明的，所以通过文字可以看到身体的背景图像。

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

Answer 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/