CSS：我可以使用文本作为掩码，所以背景图片只显示在文本内吗？ [英] CSS: Can I use text as a mask so the background image shows inside the text only?

问题描述

我在我的页面上有一个很好的背景，我想要我的文本标题作为一个掩码，通过其包含的div和背景作为纹理。

I have a nice background on my page, and I want my text header to act as a mask to cut through its containing div and have the background as a texture. Can I do this in CSS or do I have to open up photoshop?

推荐答案

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

Limited browser support, but background-clip can get you this effect: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/ (Hit the Animate buttons for more fun)

使用SVG可以这样操作： http://people.opera.com/dstorey/images/newyorkmaskexample.svg （查看源代码以查看实际执行的操作，请参阅参考文章）

Using SVG you can do it like this: http://people.opera.com/dstorey/images/newyorkmaskexample.svg (View source to see what is actually done, see reference article too)

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

Using a background image and then CSS, you could do this: http://www.netmagazine.com/tutorials/texturise-web-type-css

这篇关于CSS：我可以使用文本作为掩码，所以背景图片只显示在文本内吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！