前端技术实现文本文字纹理叠加-

发布时间：08/01 来源：未知浏览：关键词：

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

本文这里所说的叠加，就是混合模式中的叠加，也就是说，本文要实现的结果是，文字自身的色彩和纹理进行叠加，而非直接添补纹理。

CSS, SVG和canvas都能实现相似的结果，我们一个一个来看一下。

一、CSS/CSS3实现文本纹理叠加

HTML和CSS代码如下：


    
    CSS纹理叠加

.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);    
}

就可以实现相似下图的结果（红色渐变和灰色石质纹理叠加结果）：

实现道理

而在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最多配景图片进行模式混合是最简略的，由于只需要一层体现，理论支撑代码如下：

CSS纹理叠加
.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来实现，代码如下：

红绿渐变叠加石头质感纹理，终究实现的结果如下截图：

实现道理

绘制JS代码如下：

// 先引入context_blender.js，然后……
// canvas绘制足本
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var width = canvas.width, height = canvas.height;
context.textBaseline = 'middle';
context.font = 'bold 60px "Microsoft Yahei"';
// 绘制办法
var draw = function () {    
    context.clearRect(0, 0, width, height);
    // 渐变和纹理
    var gradient, pattern;
    // 新建材质canvas
    var canvasPattern = document.createElement('canvas');
    var contextUnder = canvasPattern.getContext('2d');
    canvasPattern.width = width;
    canvasPattern.height = height;
    // 新建渐变canvas
    var canvasGradient = document.createElement('canvas');
    var contextOver = canvasGradient.getContext('2d');
    canvasGradient.width = width;
    canvasGradient.height = height;
    // 绘制渐变对象
    gradient = contextOver.createLinearGradient(0, 0, 0, height);
    gradient.addColorStop(0, red);
    gradient.addColorStop(1, red);
    // 纹理对象，img指纹理图片对象
    pattern = contextUnder.createPattern(img, 'no-repeat');
    contextUnder.fillStyle = pattern;
    contextUnder.fillRect(0, 0, width, height);
    // 利用渐变
    contextOver.fillStyle = gradient;
    contextOver.fillRect(0, 0, width, height);
    // 叠加canvas
    contextOver.blendOnto(contextUnder, 'overlay');
    // 给目前context新建pattern
    pattern = context.createPattern(canvasPattern, 'no-repeat');
    // 绘制文本
    context.fillStyle = pattern;
    context.fillText('画布纹理叠加', 0, 60);
};

道理描述：

暂时新建一个canvas绘制一个渐变，暂时新建一个canvas运用纹理图片添补，两个canvas叠加混合得到新的canvas，然后页面上阿谁canvas上的文字就把这个叠加混合后canvas作为纹理进行添补，结果即达成。

兼容性

IE9+，Chrome, Safari, Firefox阅读器都支撑。

信赖看了本案牍例你已经把握了办法，更多出色请关注百分百源码网其它相干文章！

举荐浏览

android textinput显示不全怎么解决

JavaScript的继承与原型链

以上就是前端技术实现文本文字纹理叠加的细致内容，更多请关注百分百源码网其它相干文章！

打赏