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




