本文这里所说的叠加，就是混合模式中的叠加，也就是说，本文要实现的效果是，文字本身的颜色和纹理进行叠加，而非直接填充纹理。
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';
background-image: url(./pattern01.jpg);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.pattern-overlay > span {
position: absolute;
background-image: linear-gradient(to bottom, #f00, #f00);
mix-blend-mode: overlay;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.pattern-overlay > span::before {
content: attr(data-text);
}就可以实现类似下图的效果（红色渐变和灰色石质纹理叠加效果）：
您可以狠狠的点击这里：CSS实现文本的纹理叠加效果demo
在demo页面中，我们可以调整渐变图片的起止颜色，或者更换我们的纹理图片，都有实时的渲染效果：
实现原理
而在webkit浏览器下，可以通过下面CSS组合实现文本以背景显示效果：
.fill-bg {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}可以用来实现文字渐变，或者类似本站首页文字流光等效果。
于是，我们使用两层标签，分明填充渐变背景和纹理背景，然后再使用CSS3混合模式mix-blend-mode:overly对两层标签进行叠加，效果即达成！
兼容性
webkit内核浏览器，Chrome，Safari等都支持。
关于为何不使用background-blend-mode说明
理论上，使用background-blend-mode最多背景图片进行模式混合是最简单的，因为只需要一层表现，理论支持代码如下：
<h2 class="pattern-overlay">CSS纹理叠加</h2>
