CSS/CSS3如何實(shí)現(xiàn)文本紋理疊加效果

這篇文章主要為大家展示了“CSS/CSS3如何實(shí)現(xiàn)文本紋理疊加效果”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS/CSS3如何實(shí)現(xiàn)文本紋理疊加效果”這篇文章吧。

一、CSS/CSS3實(shí)現(xiàn)文本紋理疊加

HTML和CSS代碼如下：

<h3 class="pattern-overlay">
    <span data-text="CSS紋理疊加"></span>
    CSS紋理疊加
</h3>

.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)，理論支持代碼如下：

<h3 class="pattern-overlay">CSS紋理疊加</h3>

.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瀏覽器都不支持，所以只能在移動端使用，如果我們想兼容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頁面，會看到紋理并沒有疊加，那是因?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ì)canvasvar canvasPattern = document.createElement('canvas');
    var contextUnder = canvasPattern.getContext('2d');
    canvasPattern.width = width;
    canvasPattern.height = height;// 創(chuàng)建漸變canvasvar 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);// 疊加canvascontextOver.blendOnto(contextUnder, 'overlay');// 給當(dāng)前context創(chuàng)建patternpattern = 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瀏覽器都支持。

以上是“CSS/CSS3如何實(shí)現(xiàn)文本紋理疊加效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！