CSS/CSS3如何实现文本纹理叠加效果

这篇文章主要为大家展示了“CSS/CSS3如何实现文本纹理叠加效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS/CSS3如何实现文本纹理叠加效果”这篇文章吧。HTML和CSS代码如下：就可以实现类似下图的效果（红色渐变和灰色石质纹理叠加效果）：您可以狠狠的点击这里：CSS实现文本的纹理叠加效果demo在demo页面中，我们可以调整渐变图片的起止颜色，或者更换我们的纹理图片，都有实时的渲染效果：而在webkit浏览器下，可以通过下面CSS组合实现文本以背景显示效果：可以用来实现文字渐变，或者类似本站首页文字流光等效果。于是，我们使用两层标签，分明填充渐变背景和纹理背景，然后再使用CSS3混合模式mix-blend-mode:overly对两层标签进行叠加，效果即达成！webkit内核浏览器，Chrome，Safari等都支持。理论上，使用background-blend-mode最多背景图片进行模式混合是最简单的，因为只需要一层表现，理论支持代码如下：背景渐变和纹理叠加本身是没有任何问题的，效果如下截图：但是当应用background-clip:text声明的时候，混合模式被忽略，于是最终的文本并没有叠加效果。因此才采用两层独立的标签应用mix-blend-mode来叠加的方法。//zxx: CSS3对混合模式天然支持，可以参见这篇文章：“CSS3混合模式mix-blend-mode/background-blend-mode简介”，其中mix-blend-mode是元素间的混合，background-blend-mode是背景图片之间的混合。CSS3的方法最容易理解上手最快，但是Firefox和IE浏览器都不支持，所以只能在移动端使用，如果我们想兼容PC浏览器，可以试试使用SVG来实现，代码如下：红绿渐变叠加石头质感纹理，最终实现的效果如下截图：您可以狠狠地点击这里：SVG实现文本的纹理叠加效果demoSVG中有个和混合模式相关的滤镜元素名为，所以我们可以定义一个，让引用该的图形（in="SourceGraphic"）和这个图片（in2="patternSource"）进行overlay混合（mode="overlay"）。SVG中文本除了可以填充颜色外，还可以填充纹理，元素是，所以，我们需要一个渐变和纹理素材混合的元素，很简单，一个和SVG尺寸一样的矩形元素，使用渐变填充，应用叠加滤镜，作为纹理。于是，效果达成！Chrome, Safari, Firefox浏览器都支持。如果在IE浏览器下访问我们的demo页面，会看到纹理并没有叠加，那是因为，IE浏览器下的只支持规范中提到的几种混合模式，包括：normal，multiply，screen，darken，lighten。并没有叠加overlay。因此，如果你希望SVG纹理叠加效果IE9+全兼容，可以试试使用正片叠加混合模式-multiply，对于大部分用户而言，是看不出什么差异的。canvas并没有现成的混合模式api，因此，如果要想实现叠加效果，需要通过算法重新计算方法。关于混合模式的各种算法，实际上都是公开的，搜一搜就能找到。在本文中，canvas的混合模式效果使用了一个开源的JS方法，项目地址是：https://github.com/Phrogz/context-blenderJS未压缩状态也就9K不到，各种曾经的混合模式都支持。于是，要使用canvas实现纹理叠加效果那就容易多了。下面是实现的效果截图：您可以狠狠地点击这里：canvas实现文本的纹理叠加效果demo同样的，我们可以修改渐变颜色，修改纹理图片看到其他渲染效果，例如，我们选择本地一张纸张图片作为纹理：绘制JS代码如下：原理描述：
临时创建一个canvas绘制一个渐变，临时创建一个canvas使用纹理图片填充，两个canvas叠加混合得到新的canvas，然后页面上那个canvas上的文字就把这个叠加混合后canvas作为纹理进行填充，效果即达成。IE9+，Chrome, Safari, Firefox浏览器都支持。以上是“CSS/CSS3如何实现文本纹理叠加效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有免费云主机域名所帮助，如果还想学习更多知识，欢迎关注百云主机行业资讯频道！

相关推荐: 怎么将Bootstrap模态垂直居中对齐

小编免费云主机域名给大家分享一下怎么将Bootstrap模态垂直居中对齐，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 答案：使用CSSmargin-top属性 默认情况下，Boot…