CSS、SVG和canvas分別實(shí)現(xiàn)文本文字紋理疊加效果
我要評論本文這里所說的疊加，就是混合模式中的疊加，也就是說，本文要實(shí)現(xiàn)的效果是，文字本身的顏色和紋理進(jìn)行疊加，而非直接填充紋理。
CSS, SVG和canvas都能實(shí)現(xiàn)類似的效果，我們一個(gè)一個(gè)來看一下。
一、CSS/CSS3實(shí)現(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);
}
就可以實(shí)現(xiàn)類似下圖的效果（紅色漸變和灰色石質(zhì)紋理疊加效果）：
您可以狠狠的點(diǎn)擊這里：CSS實(shí)現(xiàn)文本的紋理疊加效果demo
在demo頁面中，我們可以調(diào)整漸變圖片的起止顏色，或者更換我們的紋理圖片，都有實(shí)時(shí)的渲染效果：
實(shí)現(xiàn)原理
而在webkit瀏覽器下，可以通過下面CSS組合實(shí)現(xiàn)文本以背景顯示效果：
.fill-bg {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
可以用來實(shí)現(xiàn)文字漸變，或者類似本站首頁文字流光等效果。
于是，我們使用兩層標(biāo)簽，分明填充漸變背景和紋理背景，然后再使用CSS3混合模式mix-blend-mode:overly對兩層標(biāo)簽進(jìn)行疊加，效果即達(dá)成！
兼容性
webkit內(nèi)核瀏覽器，Chrome，Safari等都支持。
關(guān)于為何不使用background-blend-mode說明
理論上，使用background-blend-mode最多背景圖片進(jìn)行模式混合是最簡單的，因?yàn)橹恍枰粚颖憩F(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聲明的時(shí)候，混合模式被忽略，于是最終的文本并沒有疊加效果。因此才采用兩層獨(dú)立的標(biāo)簽應(yīng)用mix-blend-mode來疊加的方法。
//zxx: CSS3對混合模式天然支持，可以參見這篇文章：“CSS3混合模式mix-blend-mode/background-blend-mode簡介”，其中mix-blend-mode是元素間的混合，background-blend-mode是背景圖片之間的混合。
二、使用SVG實(shí)現(xiàn)更加兼容的文本紋理疊加效果
CSS3的方法最容易理解上手最快，但是Firefox和IE瀏覽器都不支持，所以只能在移動(dòng)端使用，如果我們想兼容PC瀏覽器，可以試試使用SVG來實(shí)現(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ì)感紋理，最終實(shí)現(xiàn)的效果如下截圖：
您可以狠狠地點(diǎn)擊這里：SVG實(shí)現(xiàn)文本的紋理疊加效果demo
實(shí)現(xiàn)原理
SVG中有個(gè)和混合模式相關(guān)的濾鏡元素名為<feBlend>，所以我們可以定義一個(gè)<filter>，讓引用該<filter>的圖形（in="SourceGraphic"）和<feImage>這個(gè)圖片（in2="patternSource"）進(jìn)行overlay混合（mode="overlay"）。
SVG中文本除了可以填充顏色外，還可以填充紋理，元素是<pattern>，所以，我們需要一個(gè)漸變和紋理素材混合的<pattern>元素，很簡單，一個(gè)和SVG尺寸一樣的矩形<rect>元素，使用漸變填充，應(yīng)用疊加濾鏡，作為<pattern>紋理。
于是，效果達(dá)成！
兼容性
Chrome, Safari, Firefox瀏覽器都支持。
如果在IE瀏覽器下訪問我們的demo頁面，會(huì)看到紋理并沒有疊加，那是因?yàn)?，IE瀏覽器下的<feBlend>只支持規(guī)范中提到的幾種混合模式，包括：normal，multiply，screen，darken，lighten。并沒有疊加overlay。
因此，如果你希望SVG紋理疊加效果IE9+全兼容，可以試試使用正片疊加混合模式-multiply，對于大部分用戶而言，是看不出什么差異的。
三、使用canvas實(shí)現(xiàn)紋理疊加效果
canvas并沒有現(xiàn)成的混合模式api，因此，如果要想實(shí)現(xiàn)疊加效果，需要通過算法重新計(jì)算方法。關(guān)于混合模式的各種算法，實(shí)際上都是公開的，搜一搜就能找到。
在本文中，canvas的混合模式效果使用了一個(gè)開源的JS方法，項(xiàng)目地址是：https://github.com/Phrogz/context-blender
JS未壓縮狀態(tài)也就9K不到，各種曾經(jīng)的混合模式都支持。
于是，要使用canvas實(shí)現(xiàn)紋理疊加效果那就容易多了。
下面是實(shí)現(xiàn)的效果截圖：
您可以狠狠地點(diǎn)擊這里：canvas實(shí)現(xiàn)文本的紋理疊加效果demo
同樣的，我們可以修改漸變顏色，修改紋理圖片看到其他渲染效果，例如，我們選擇本地一張紙張圖片作為紋理：
實(shí)現(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);
};
原理描述：
臨時(shí)創(chuàng)建一個(gè)canvas繪制一個(gè)漸變，臨時(shí)創(chuàng)建一個(gè)canvas使用紋理圖片填充，兩個(gè)canvas疊加混合得到新的canvas，然后頁面上那個(gè)canvas上的文字就把這個(gè)疊加混合后canvas作為紋理進(jìn)行填充，效果即達(dá)成。
兼容性
IE9+，Chrome, Safari, Firefox瀏覽器都支持。
四、結(jié)束語
本文所有案例，無論是CSS3，SVG還是canvas實(shí)現(xiàn)都是以疊加混合模式overlay示意的。其他各種混合模式也都可以輕松支持，只要修改overlay為其他關(guān)鍵字即可。希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時(shí)控制行和列，相比 Flex（一維布局），更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個(gè)非?；A(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實(shí)際項(xiàng)目中使用它們2025-04-07- will-change 是一個(gè) CSS 屬性，用于告訴瀏覽器某個(gè)元素在未來可能會(huì)發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-04-07
在前端開發(fā)中，CSS（層疊樣式表）不僅是用來控制網(wǎng)頁的外觀和布局，更是實(shí)現(xiàn)復(fù)雜交互和動(dòng)態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級,本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會(huì)失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實(shí)現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
前端 CSS 動(dòng)態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)
本文介紹了Vue.js中動(dòng)態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動(dòng)態(tài)切換類名或樣式；通過數(shù)組語法,可以同時(shí)綁定多個(gè)類名或樣式,此外2025-02-26
