CSS - 基于文本遮罩的文本纹理
前言
CSS3处理图像的强大功能使我们可以通过一张图片来给文本添加图像遮罩。换做以前，这只能在图像处理工具中创建一张带有该效果的静态图片来实现。
准备工作
首先需要一张图片来作为纹理遮罩。使用图片编辑软件，生成一张具有透明通道（alpha channel）的新图片。如果没有能够生成带透明通道的PNG格式图片的图片编辑工具，你可以从www.gimp.org下载名叫GIMP的免费图片编辑工具。可以在图片的顶部采用散点画笔创建一个具有一定纹理的区域，来快速生成一张用于纹理遮罩的图片。
保留该图片的透明通道，以PNG格式将其保存在网站对应的images目录下。
实现方式
在你的HTML文件中定义一个头元素，其中包含需要添加纹理特效的文本。然后，为其添加一些文本内容：
现在可以添加CSS标记了。这将包括很大的字号（为了炫耀纹理渲染的效果）、白色字体，内边距及对齐等，当然也包括图片遮罩属性。
注意：不同浏览器要求的属性前缀不同。
CSS特效呈现在下面的截图中。
工作原理
遮罩图片根据本身的透明度裁剪了元素的可视区域。使用CSS将遮罩图片应用于文本时，遮罩部分会被裁剪掉。该方法的实现原理与采用图像编辑软件产生的透明图层类似。