文字背景叠加效果

.pattern-overlay {
    font-size: 60px;
    font-family: 'microsoft yahei';
    background-image: url(./pattern01.png); 
    -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);    
}

<h2 class="pattern-overlay">
    <span data-text="CSS纹理叠加"></span>
    CSS纹理叠加
</h2>

兼容性更好的svg

<svg width="360" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="blend">
     <feImage xlink:href="./pattern01.jpg" result="patternSource" x="0" y="0" width="360" height="120" />
     <!-- IE浏览器不支持overly混合模式，可使用multiply替代 -->              
     <feBlend mode="overlay" in="SourceGraphic" in2="patternSource" />
    </filter>
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%"   stop-color="green" />
        <stop offset="100%" stop-color="red" />
    </linearGradient>
    <pattern id="pattern" width="360" height="120" patternUnits="userSpaceOnUse">
        <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" filter="url(#blend)"></rect>
    </pattern>
  </defs>
  <text x="0" y="60" font-family="Microsoft Yahei" font-size="60" font-weight="900" fill="url(#pattern)">
    SVG纹理叠加
  </text>
</svg>

来源：https://www.zhangxinxu.com/wordpress/2018/02/css-svg-canvas-text-pattern-overlay/