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

Question

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

Answer 1

有限的浏览器支持,但background-clip可以让你这样的效果:http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/(点击动画按钮更有趣)

使用SVG你可以这样做:http://people.opera.com/dstorey/images/newyorkmaskexample.svg(查看源代码看看实际做了什么,参见参考文章)

使用背景图像然后使用CSS,您可以这样做:http://www.netmagazine.com/tutorials/texturise-web-type-css

Answer 2

正如 CSS-Tricks 在本文中所示， “文本后面的图像”可以这样完成：

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。

这是它工作时的样子：