CSS、SVG和canvas分別實現(xiàn)文本文字紋理疊加效果
我要評論本文這里所說的疊加，就是混合模式中的疊加，也就是說，本文要實現(xiàn)的效果是，文字本身的顏色和紋理進行疊加，而非直接填充紋理。
CSS, SVG和canvas都能實現(xiàn)類似的效果，我們一個一個來看一下。
一、CSS/CSS3實現(xiàn)文本紋理疊加
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);
}
就可以實現(xiàn)類似下圖的效果（紅色漸變和灰色石質(zhì)紋理疊加效果）：
您可以狠狠的點擊這里：CSS實現(xiàn)文本的紋理疊加效果demo
在demo頁面中，我們可以調(diào)整漸變圖片的起止顏色，或者更換我們的紋理圖片，都有實時的渲染效果：
實現(xiàn)原理
而在webkit瀏覽器下，可以通過下面CSS組合實現(xiàn)文本以背景顯示效果：
.fill-bg {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
可以用來實現(xiàn)文字漸變，或者類似本站首頁文字流光等效果。
于是，我們使用兩層標(biāo)簽，分明填充漸變背景和紋理背景，然后再使用CSS3混合模式mix-blend-mode:overly對兩層標(biāo)簽進行疊加，效果即達成！
兼容性
webkit內(nèi)核瀏覽器，Chrome，Safari等都支持。
關(guān)于為何不使用background-blend-mode說明
理論上，使用background-blend-mode最多背景圖片進行模式混合是最簡單的，因為只需要一層表現(xiàn)，理論支持代碼如下：
<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;
}
背景漸變和紋理疊加本身是沒有任何問題的，效果如下截圖：
但是當(dāng)應(yīng)用background-clip:text聲明的時候，混合模式被忽略，于是最終的文本并沒有疊加效果。因此才采用兩層獨立的標(biāo)簽應(yīng)用mix-blend-mode來疊加的方法。
//zxx: CSS3對混合模式天然支持，可以參見這篇文章：“CSS3混合模式mix-blend-mode/background-blend-mode簡介”，其中mix-blend-mode是元素間的混合，background-blend-mode是背景圖片之間的混合。
二、使用SVG實現(xiàn)更加兼容的文本紋理疊加效果
CSS3的方法最容易理解上手最快，但是Firefox和IE瀏覽器都不支持，所以只能在移動端使用，如果我們想兼容PC瀏覽器，可以試試使用SVG來實現(xiàn)，代碼如下：
<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>
紅綠漸變疊加石頭質(zhì)感紋理，最終實現(xiàn)的效果如下截圖：
您可以狠狠地點擊這里：SVG實現(xiàn)文本的紋理疊加效果demo
實現(xiàn)原理
SVG中有個和混合模式相關(guān)的濾鏡元素名為<feBlend>，所以我們可以定義一個<filter>，讓引用該<filter>的圖形（in="SourceGraphic"）和<feImage>這個圖片（in2="patternSource"）進行overlay混合（mode="overlay"）。
SVG中文本除了可以填充顏色外，還可以填充紋理，元素是<pattern>，所以，我們需要一個漸變和紋理素材混合的<pattern>元素，很簡單，一個和SVG尺寸一樣的矩形<rect>元素，使用漸變填充，應(yīng)用疊加濾鏡，作為<pattern>紋理。
于是，效果達成！
兼容性
Chrome, Safari, Firefox瀏覽器都支持。
如果在IE瀏覽器下訪問我們的demo頁面，會看到紋理并沒有疊加，那是因為，IE瀏覽器下的<feBlend>只支持規(guī)范中提到的幾種混合模式，包括：normal，multiply，screen，darken，lighten。并沒有疊加overlay。
因此，如果你希望SVG紋理疊加效果IE9+全兼容，可以試試使用正片疊加混合模式-multiply，對于大部分用戶而言，是看不出什么差異的。
三、使用canvas實現(xiàn)紋理疊加效果
canvas并沒有現(xiàn)成的混合模式api，因此，如果要想實現(xiàn)疊加效果，需要通過算法重新計算方法。關(guān)于混合模式的各種算法，實際上都是公開的，搜一搜就能找到。
在本文中，canvas的混合模式效果使用了一個開源的JS方法，項目地址是：https://github.com/Phrogz/context-blender
JS未壓縮狀態(tài)也就9K不到，各種曾經(jīng)的混合模式都支持。
于是，要使用canvas實現(xiàn)紋理疊加效果那就容易多了。
下面是實現(xiàn)的效果截圖：
您可以狠狠地點擊這里：canvas實現(xiàn)文本的紋理疊加效果demo
同樣的，我們可以修改漸變顏色，修改紋理圖片看到其他渲染效果，例如，我們選擇本地一張紙張圖片作為紋理：
實現(xiàn)原理
繪制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;
// 創(chuàng)建材質(zhì)canvas
var canvasPattern = document.createElement('canvas');
var contextUnder = canvasPattern.getContext('2d');
canvasPattern.width = width;
canvasPattern.height = height;
// 創(chuàng)建漸變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);
// 應(yīng)用漸變
contextOver.fillStyle = gradient;
contextOver.fillRect(0, 0, width, height);
// 疊加canvas
contextOver.blendOnto(contextUnder, 'overlay');
// 給當(dāng)前context創(chuàng)建pattern
pattern = context.createPattern(canvasPattern, 'no-repeat');
// 繪制文本
context.fillStyle = pattern;
context.fillText('畫布紋理疊加', 0, 60);
};
原理描述：
臨時創(chuàng)建一個canvas繪制一個漸變，臨時創(chuàng)建一個canvas使用紋理圖片填充，兩個canvas疊加混合得到新的canvas，然后頁面上那個canvas上的文字就把這個疊加混合后canvas作為紋理進行填充，效果即達成。
兼容性
IE9+，Chrome, Safari, Firefox瀏覽器都支持。
四、結(jié)束語
本文所有案例，無論是CSS3，SVG還是canvas實現(xiàn)都是以疊加混合模式overlay示意的。其他各種混合模式也都可以輕松支持，只要修改overlay為其他關(guān)鍵字即可。希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
CSS3打造的現(xiàn)代交互式登錄界面詳細實現(xiàn)過程
本文介紹CSS3和jQuery在登錄界面設(shè)計中的應(yīng)用,涵蓋動畫、選擇器、自定義字體及盒模型技術(shù),提升界面美觀與交互性,同時優(yōu)化性能和可訪問性，感興趣的朋友跟隨小編一起看看吧2025-06-20CSS普通流、浮動與定位網(wǎng)頁布局三大機制及最佳實踐
本文給大家講解CSS 的三種核心布局機制——普通流(Normal Flow)、浮動(Float)和定位(Positioning)對于創(chuàng)建靈活、響應(yīng)式的網(wǎng)頁至關(guān)重要,本文將深入探討這三種機制的工作原2025-06-19
css實現(xiàn)角標(biāo)效果并帶有文章或圖標(biāo)效果(完整代碼)
文章介紹如何用CSS實現(xiàn)角標(biāo)效果,通過.active類結(jié)合::after和::before偽元素,利用定位、邊框和旋轉(zhuǎn)創(chuàng)建紅色邊框與白色三角形的提示標(biāo)志,適用于按鈕或卡片元素的視覺增強設(shè)計2025-06-19CSS Anchor Positioning重新定義錨點定位的時代來臨(最新推薦)
CSS Anchor Positioning是一項仍在草案中的新特性，由 Chrome 125 開始提供原生支持需啟用實驗 flag,它允許你在 CSS 中通過錨點（anchor）來相對于任意 DOM 元素定位,本文2025-06-17CSS中的Static、Relative、Absolute、Fixed、Sticky的應(yīng)用與詳細對比
CSS 中的 position 屬性用于控制元素的定位方式，不同的定位方式會影響元素在頁面中的布局和層疊關(guān)系,以下是 static、relative、absolute、fixed、sticky 的詳細對比和應(yīng)用2025-06-17CSS place-items: center解析與用法詳解
place-items: center; 是一個強大的 CSS 簡寫屬性，用于同時控制 網(wǎng)格(Grid) 和 彈性盒(Flexbox) 布局中的對齊方式，本文給大家介紹CSS place-items: center； 詳解與用法2025-06-17
在日常開發(fā)中，我們經(jīng)常需要讓某個元素占據(jù)容器的剩余空間，本文將介紹5種不同的方法來實現(xiàn)這個需求，并分析各種方法的優(yōu)缺點，感興趣的朋友一起看看吧2025-06-17CSS中前端單位 px、vw、vh 等的區(qū)別與使用建議
CSS單位區(qū)別與使用場景總結(jié)：px絕對、vw/vh響應(yīng)式,%繼承父尺寸,em/rem文字縮放,vmin/vmax適應(yīng)寬高變化,固定布局用px或%,響應(yīng)式布局用vw/vh/rem,文字用em或rem，本文給大家2025-06-16CSS 樣式表的四種應(yīng)用方式及css注釋的應(yīng)用小結(jié)
這篇文章主要介紹了CSS 樣式表的四種應(yīng)用方式及css注釋的應(yīng)用小結(jié),本文通過實例代碼給大家介紹的非常詳細，感興趣的朋友跟隨小編一起看看吧2025-05-21- 在CSS布局中，padding屬性是控制元素內(nèi)容與其邊框之間距離的關(guān)鍵工具，本文介紹CSS基礎(chǔ)中padding，通過本文的介紹，我們深入了解了padding的基本概念、簡寫方法以及它對元2025-05-16
