使用文字作为背景图片的遮罩 [英] Use text as a mask on background image

问题描述

我的页面背景很好，我希望我的文本标题充当 mask ，以切穿其包含的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.

我可以在 CSS 中执行此操作还是必须打开 Photoshop ？

Can I do this in CSS or do I have to open up Photoshop?

推荐答案

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

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

这篇关于使用文字作为背景图片的遮罩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！