css3 叠加效果-2.使用SVG实现更多、更兼容的文字纹理叠加效果

因此，我们使用两层标签清晰地填充渐变背景和纹理背景，然后使用CSS3混合模式mix-blend-mode:overly将两层标签叠加，效果就达到了！

兼容性

Webkit内核浏览器、Chrome、Safari等都支持。

解释为什么不使用背景混合模式

理论上来说css3 叠加效果，使用背景图片最多的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 - 模式是背景图像之间的混合。

2.使用SVG实现更多、更兼容的文字纹理叠加效果

CSS3方式最容易理解，使用速度最快，而Firefox和IE浏览器都不支持，所以只能在中国联通上使用。 如果我们想兼容PC浏览器，可以尝试使用SVG来实现。 代码如下：

将红绿渐变叠加在石纹纹理上，最终的疗效如下：

大家可以硬点这里：SVG实现文字纹理叠加效果演示

实现原理

在SVG中，有一个与调用的混合模式相关的过滤器元素，因此我们可以定义一个，让引用的图形（in=“SourceGraphic”）和这张图像（in2=“patternSource”）进行叠加混合（mode=“overlay”） ”）。

SVG中的文本不仅可以填充颜色，还可以填充纹理。 这些元素是

，所以我们需要渐变和纹理材质的混合

元素，很简单，一个具有相同 SVG 规范的方形元素，填充渐变，并应用覆盖过滤器，如

质地。

这样，疗效就达到了！

兼容性

Chrome、Safari、Firefox 浏览器均受支持。

如果你在IE浏览器下访问我们的演示页面，你会听到纹理没有叠加，这是因为IE浏览器只支持规范中提到的几种混合模式，包括：正常、正片叠底、滤色、变暗、变亮。 没有叠加。

因此，如果你想让SVG纹理叠加效果完全兼容IE9+，可以尝试使用正叠加混合模式-multiply。 对于大多数用户来说，没有什么区别。

3.使用canvas实现纹理叠加效果

Canvas 没有现成的混合模式 API。 为此，如果想要达到叠加的效果，就需要通过算法重新估算方法。 关于混合模式的各种算法其实都是公开的css3 叠加效果，只能通过搜索才能找到。

本文采用了一个开源的JS方法来实现canvas混合模式的效果。 项目地址为：

JS未压缩状态小于9K，支持以前的各种混合模式。

因此，使用canvas来实现纹理叠加的效果要容易得多。

以下是所达到的疗效截图：

大家可以硬点这里：Canvas实现文字纹理叠加效果演示

同样，我们可以改变渐变颜色，改变纹理图像来查看其他渲染效果，例如我们选择本地纸张图像作为纹理：

实现原理

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

原理说明：

临时创建一个画布来绘制渐变，临时创建一个画布来填充纹理图像，将两个画布叠加混合得到一个新的画布，然后将叠加混合的画布填充为页面上文字的纹理。 实现了。

兼容性

IE9+、Chrome、Safari、Firefox 浏览器均受支持。

如需转载，请注明文章出处及来源网址：