《响应式Web设计：HTML5和CSS3实践指南》——2.8节基于文本遮罩的文本纹理

本节书摘来自华章社区《响应式Web设计：HTML5和CSS3实践指南》一书中的第2章，第2.8节基于文本遮罩的文本纹理，作者（美） Benjamin LaGrone，更多章节内容可以访问云栖社区“华章社区”公众号查看

2.8 基于文本遮罩的文本纹理
CSS3处理图像的强大功能使我们可以通过一张图片来给文本添加图像遮罩。换做以前，这只能在图像处理工具中创建一张带有该效果的静态图片来实现。

2.8.1 准备工作
首先需要一张图片来作为纹理遮罩。使用图片编辑软件，生成一张具有透明通道（alpha channel）的新图片。如果没有能够生成带透明通道的PNG格式图片的图片编辑工具，你可以从http://www.gimp.org下载名叫GIMP的免费图片编辑工具。可以在图片的顶部采用散点画笔创建一个具有一定纹理的区域，来快速生成一张用于纹理遮罩的图片。
保留该图片的透明通道，以PNG格式将其保存在网站对应的images目录下。

2.8.2 实现方式
在你的HTML文件中定义一个头元素，其中包含需要添加纹理特效的文本。然后，为其添加一些文本内容：

CSS特效呈现在下面的截图中。

2.8.3 工作原理
遮罩图片根据本身的透明度裁剪了元素的可视区域。使用CSS将遮罩图片应用于文本时，遮罩部分会被裁剪掉。该方法的实现原理与采用图像编辑软件产生的透明图层类似。