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

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

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

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来实现，代码如下：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浏览器都支持。

相信看了本文案例你已经掌握了方法，更多精彩请关注 第一PHP社区 其它相关文章！

推荐阅读

android textinput显示不全怎么解决

JavaScript的继承与原型链