前面的话
本文将通过多种方式实现纹理文本的效果
背景裁切
对于实现纹理文本的效果，脑海中最直接能想到的办法可能是
使用来填充文本背景
match
下面使用一张枫叶的背景，来制作纹理文本
match
当然了，放一张动态gif图，也是没问题的
match
如果想要让填充动起来，可以通过移动背景的位置和尺寸来添加动画
match
使用background-clip背景裁切的技术，文本可以被选中。但是，由于只有webkit内核的浏览器支持，因此并不是跨浏览器的好方案
SVG
如果要对文本纹理做更精密的设置，且考虑浏览器兼容性，最好的方案还是使用
首先，可以通过，来实现文本纹理的动态效果
使用，可以实现更精细的纹理动画效果
如果想实现虚线动画的效果，则需要使用SVG文本的虚线描边
混合模式
使用CSS3的新属性中的元素混合mix-blend-mode属性也可以实现类似的效果。元素混合mix-blend-mode应用于两个元素之间的混合，这时就需要将文字和纹理效果分开为两个元素
match
关于背景为图片的效果就不再赘述，和backgroung-clip方法类似
但是，由于它是两个元素的混合，而不仅仅是应用背景样式。因此，其甚至可以将视频作为纹理
match
当然，还可以是有声动画
match
虽然混合模式有更大的自由度，但是由于其是CSS3的属性，IE浏览器、android4.4-不支持，safari和IOS需要添加-webkit-前缀。浏览器兼容性并不是很好