CSS、SVG和canvas分别实现文本文字纹理叠加效果

本文这里所说的叠加，就是混合模式中的叠加，也就是说，本文要实现的效果是，文字本身的颜色和纹理进行叠加，而非直接填充纹理。 CSS, SVG和canvas都能实现类似的效果，我们一个一个来看一下。 一、CSS/CSS3实现文本纹理叠加 HTML和CSS代码如下： <h2 class=pattern-overlay> <span data-text=CSS纹理叠加></span> CSS纹理叠加 </h2> .pattern-overlay { font-size: 60px; font-family: 'microsoft yahei'; bac