CSS：我可以使用文本作为掩码，因此背景图像只显示在文本中吗？

Question

我的页面上有一个很好的背景，我希望我的文本标题可以作为一个掩码来剪切其包含的div并将背景作为纹理。我可以在CSS中执行此操作，还是必须打开photoshop？

Answer 1

有限的浏览器支持，但background-clip可以为您带来这种效果：http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/（点击动画按钮以获得更多乐趣）

使用SVG，您可以这样做：http://people.opera.com/dstorey/images/newyorkmaskexample.svg（查看来源以查看实际执行的内容，另请参阅reference article）

使用背景图片然后使用CSS，您可以执行以下操作：http://www.netmagazine.com/tutorials/texturise-web-type-css

Answer 2

CSS3中有background-clip: text属性，但它并不适用于所有浏览器。有关详细信息，请参阅here。

Answer 3

由于CSS-Tricks在此article中显示，＆＃39;图片背后的文字＆＃39;可以这样做：

h1 {
   color: white;  /* Fallback: assume this color ON TOP of image */
   background: url(images/fire.jpg) no-repeat; /* Set the backround image */
   -webkit-background-clip: text; /* clip the background to the text inside the tag*/
   -webkit-text-fill-color: transparent; /* make the text transparent so 
                                          * the background shows through*/
}

但它并不能保证适用于所有浏览器，所以他们提出了一些解决方法，例如modernizr。

以下是它工作时的样子：

Answer 4

扩展@ sgress454的答案。如今，background-clip: text可在Firefox中使用，但其浏览器兼容性仍不完整（Safari和Chrome浏览器运行缓慢...）。 background-clip: text仍是您要寻找的东西：

background-clip：文本；

背景是在前景文本中绘制（剪切）的。

MDN

演示：

body {background: black;}

div {
  background: url(https://images.unsplash.com/photo-1543005472-1b1d37fa4eae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60), black;
  background-clip: text;
  color: transparent;
}

<div>This background clips to the text.</div>