前端技术实现文本文字纹理叠加-木庄网络博客

本文摘自PHP中文网，作者php中世界最好的语言，侵删。

这次给大家带来前端技术实现文本文字纹理叠加，前端技术实现文本文字纹理叠加的注意事项有哪些，下面就是实战案例，一起来看一下。

本文这里所说的叠加，就是混合模式中的叠加，也就是说，本文要实现的效果是，文字本身的颜色和纹理进行叠加，而非直接填充纹理。

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纹理叠加效果截图

您可以狠狠的点击这里：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>
.pattern-overlay {
    font-size: 60px;
    font-family: 'microsoft yahei';
    background-image: linear-gradient(to bottom, #f00, #f00), url(./pattern01.jpg);
    background-blend-mode: overlay;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

背景渐变和纹理叠加本身是没有任何问题的，效果如下截图：

但是当应用background-clip:text声明的时候，混合模式被忽略，于是最终的文本并没有叠加效果。因此才采用两层独立的标签应用mix-blend-mode来叠加的方法。

//zxx: CSS3对混合模式天然支持，可以参见这篇文章：“CSS3混合模式mix-blend-mode/background-blend-mode简介”，其中mix-blend-mode是元素间的混合，background-blend-mode是背景图片之间的混合。

二、使用SVG实现更加兼容的文本纹理叠加效果

CSS3的方法最容易理解上手最快，但是Firefox和IE浏览器都不支持，所以只能在移动端使用，如果我们想兼容PC浏览器，可以试试使用SVG来实现，代码如下：

<svg width="360" height="120">
  <defs>
    <filter id="blend">
     <feImage xlink:href="./pattern01.jpg" result="patternSource" x="0" y="0" width="360" height="120" />            
     <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>