【譯】建立紋理文本的技巧

時間 2019-12-05

標籤建立紋理文本技巧简体版

原文原文鏈接

原文地址：codrops
原文做者：Sara Soueidan

在線預覽下載源碼javascript

在本文中，咱們將探討幾種可用於建立紋理文本或將背景應用於文本的小技巧。css

請記住，本文中介紹的一些技術是實驗性的，瀏覽器支持很是低，在構建須要普遍瀏覽器支持的實際項目時可能不是最好的實現。html

我已經爲每一個演示提供了一個屏幕截圖，每一個技術結束時也會有演示的連接。java

圖像應用於文本背景

-webkit-background-clip: textgit

咱們將從CSS background-clip屬性開始，並使用它來得到如下效果： web

CSS background-clip屬性肯定元素的背景繪製區域。默認狀況下，背景被裁切到border-box的邊框位置，它能夠設置爲其餘值，如padding-box和content-box，這些都是不言自明的。ajax

可使用此屬性建立不一樣的效果，例如賦予元素透明邊框，在全部現代瀏覽器中都獲得了很好的支持。canvas

background-clip屬性在Webkit中使用第四個值text進行了擴展，這會使背景圖像剪切爲前景文本（包括裝飾和陰影）。而後，經過使用僅Webkit屬性-webkit-text-fill-color爲文本提供透明顏色，背景圖像將經過文本顯示，從而完成剪切效果。api

在撰寫本文時，background-clip屬性的文本值不是任何標準的一部分，所以不幸的是它只能在WebKit瀏覽器中工做，而且能夠爲其餘瀏覽器提供簡單的CSS回退，或者使用polyfill提供其餘後備。瀏覽器

如今，咱們將使用-webkit-background-clip屬性建立一個帶背景的文本，並提供一個僅CSS的回退，它將在非WebKit瀏覽器的文本下顯示圖像。

對於咱們的演示（如上面的屏幕截圖所示），咱們有一個有背景的元素，它內部有一個標題，咱們想要剪切其背景，使其看起來好像背景僅應用於其中的標題文本。

<div class="container">
	<!-- the element whose background we're going to clip --> <div class="clipped"> <h1>CO<br/>OK</h1> </div> <!-- arbitrary content --> <p><span>The #1 cooking magazine in the world.</span> New healthy and delicious recipes every week. Subscribe to the weekly issue of COOK magazine and stay up-to-date on the latest kitchen trends and tips anc tricks from the world's #1 chefs. <br/>
	Download our app available for Android, iOS and Windows phones.</p>
</div>
複製代碼

咱們將使用「寬字體」，以便經過文本更清晰地看到背景。 .clipped元素將得到一個背景圖像，咱們將background-clip的屬性值設置爲text來剪切文本。咱們要將文本顏色設置爲白色，由於非WebKit瀏覽器會在圖像頂部顯示文本，咱們須要選擇在咱們選擇的背景上可讀的字體顏色。而後咱們將文本的填充顏色設置爲透明，這將覆蓋WebKit瀏覽器中的白色文本顏色，以便背景圖像能夠顯示。

.clipped {
	background: url(../img/kitchen.jpg) no-repeat center center;
	background-size: cover;
	color: #fff;
	text-align: center;
	padding: 2em;
	/* -webkit-background-clip clips the background of the element to the text */
	-webkit-text-fill-color: transparent; /* overrides the white text color in webkit browsers */
	-webkit-background-clip: text;
}
複製代碼

查看demo1:使用background-clip屬性實現文本背景

若是您在非WebKit瀏覽器中查看演示，您將在背景圖像上看到白色文本。

在非WebKit瀏覽器中顯示不透明文本背後的背景圖像多是圖像在傳達可視消息中起重要做用的最佳後備，但若是您在背景中沒有圖像，也能夠回退到常規文本。 Divya Manian撰寫了一篇很好的文章，解釋瞭如何實現常規文本後備，Rachel Nabors根據Divya的代碼建立了一個Sass mixin，而且已經在Codepen上提供，若是你願意的話也可使用它。

如今，就像咱們將圖像背景應用於文本同樣，您也能夠應用漸變背景。由於CSS中的漸變是圖像，因此能夠對上面的.clipped元素應用漸變，結果將是具備漸變背景的文本。Riza SelçukSaydam在Codepen上建立了一個很是好的交互式逐步演示，它演示瞭如何製做文本漸變。您能夠查看它以得到有關此技術的更直觀的解釋。

mask-image: url()實現紋理文本

咱們將要討論的如下CSS技術目前僅在WebKit瀏覽器中支持（請參閱此處的支持表），並帶有-webkit前綴。

咱們將使用CSS mask來建立漂亮的紋理文本效果。 CSS Masking是一個W3C工做草案，但願不久以後其餘瀏覽器也會開始實現它。

但就目前而言，咱們將建立一個目前僅適用於WebKit瀏覽器的演示，而且咱們將爲不支持的瀏覽器提供簡單的後備。咱們將使用CSS的mask-image屬性將splatter效果應用於文本以得到以下結果：

當咱們使用CSS masks,時，咱們正在使文本採用其蒙版圖像的形狀，而不是像上面的背景剪輯技術那樣使圖像採用文本的形狀。

mask-image屬性採用如下三個值之一：具備Alpha不透明度的圖像，其中透明區域將是不顯示內容的區域，CSS漸變或無。對於咱們的演示，咱們將使用具備alpha不透明度的圖像，以下所示：

圖像表明了一堆咱們想要應用於文本的油漆潑濺物，使文字看起來像是上面有一些水彩顏料。不支持的瀏覽器只會顯示文本而不會應用潑濺效果。

將此蒙版應用於文本或任何其餘內容時，文本將顯示在黑色噴濺的位置，而蒙版圖像是透明的部分，文本將不會顯示。您能夠將文本（或內容）想象爲圖層，將蒙版想象爲另外一個圖層，而後想象將蒙版圖像放在文本頂部，而後獲取橡皮擦並開始刪除未覆蓋的文本的全部部分經過那些黑點，你將最終獲得掩蓋的文本，如上面的演示截圖所示。

爲了使效果更逼真，我在包含該文本的元素中添加了水彩背景，該文本將經過文本顯示「已刪除」，所以很好地將文本與其背景混合。全部這一切，僅使用CSS。挺整潔的吧？目前瀏覽器支持太糟糕了。可是咱們將在下一節從新討論這種效果以跨瀏覽器工做。

如今，對於咱們的演示，咱們有一個包含兩個標題的容器：

<div class="container> <h1>Art</h1> <h2>Digital Magazine</h2> </div> 複製代碼

咱們將splatter效果應用於h1元素。這是相關CSS：

.container h1 {
	font: 35em/100% "Oswald", sans-serif;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	color: #fff;
	/* the property that creates the splatter effect */
	-webkit-mask-image: url(../img/splatter-mask_1.png);
	mask-image: url(../img/splatter-mask_1.png); 
}
複製代碼

這就是實現這種效果所需的一切。如今，固然你會想要添加一些額外的樣式，就像我在演示中所作的那樣，這取決於你所經歷的總體效果，可是當你使用蒙版爲文本添加紋理時，一行CSS是很是重要的。

這裏要注意的一件重要事情是，當在其餘瀏覽器中實現此屬性時，-webkit-前綴多是也可能不是您須要的惟一前綴。在編寫本文時，您須要爲此添加-webkit-前綴，若是您在項目中使用此技術，請確保在規範或瀏覽器支持該屬性時更新代碼。

查看demo2 mask-image: url()實現紋理文本

該演示將在不支持的瀏覽器中顯示常規的文本。

您能夠在W3C規範中閱讀有關CSS Masking的更多信息，並在Trent Walton的這篇文章中查看另外一個細微紋理文本示例。

使用SVG建立紋理文本

上面的兩種效果均可以使用SVG從新實現，使用SVG實現的結果是能夠跨瀏覽器的，所以您可使用SVG方法做爲上述CSS屬性的非支持瀏覽器的回退。

使用SVG <clippath>剪切文本背景

首先，咱們將使用SVG的元素從新建立CSS background-clip實現的文本效果。

剪切路徑肯定要應用背景的形狀或區域。背景中位於定義形狀以外的部分將不會被繪製，而且只有給定形狀內的部分纔會被繪製。

剪切路徑能夠採用多個值，其中一個是元素。當剪輯路徑設置爲文本元素時，背景將被剪切爲所用文本的形狀。

一旦定義了剪切路徑（咱們將馬上獲得代碼），可使用clip-path引用該路徑，做爲咱們想要剪輯的圖像的屬性，或者做爲該圖像的CSS屬性。

讓咱們首先定義咱們想要用來剪輯圖像的剪輯路徑，在咱們的例子中，這只是咱們想要顯示背景圖像的單個單詞。

首先，咱們建立一個包含全部SVG代碼的SVG元素。而後咱們將定義剪輯路徑並經過clip-path屬性將其應用於圖像元素：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1200" height="400" viewBox="0 0 1200 400"> 
    <!-- add title for accessibility -->
    <title>Adding Background to Text using SVG clipPath</title> 
    <defs>  
      <clippath id="my-path">
        <text x="50" y="300" font-size="200" >WATERCOLOR</text>
      </clippath>
    </defs>
    <image xlink:href="img/watercolor_1.jpg" clip-path="url(#test)" width="100%" height="100%" preserveAspectRatio="none" />
</svg>
複製代碼

由於SVG元素基本上是圖形，因此請確保包含標題，以便屏幕閱讀器能夠訪問它。

在上面的代碼中，咱們建立了一個文本元素，給定了字體大小，並定義了x和y座標，這些座標肯定了在SVG中繪製文本的位置。而後，咱們將咱們的文本元素放在clippath元素中，咱們已經給出了一個ID，以便咱們可以引用它。而後，咱們將clippath元素放在defs元素中。 defs元素可用於存儲不直接顯示的內容。而後，這些存儲的隱藏內容能夠被其餘SVG元素引用和顯示，這使得它很是適合包含可重用圖形的模式。在咱們的例子中，它很是適合定義咱們想要在圖像屬性中引用剪輯路徑的目的。

接下來，咱們添加了咱們的圖像，給它一個寬度和一個高度，並將preserveAspectRatio設置爲none，這樣它的寬高比就不會被鎖定，由於若是不這樣，那麼它們的高度和寬度都不會應用。

最後，咱們使用圖像上的clip-path屬性引用了咱們定義的剪切路徑。 clip-path屬性將clippath元素的ID做爲其值，並將剪切路徑應用於圖像。

查看demo3 使用SVG建立紋理文本

您能夠經過使用CSS應用它，而不是使用clip-path屬性引用剪輯路徑，以下所示：

image {
    clip-path: url(#my-path);
}
複製代碼

這應該在全部現代瀏覽器中均可以正常展現：Chrome，Safari，Opera，Firefox和IE9 +。因此，若是你想使用CSS background-clip：text; 例如，你可使用Modernizr檢查瀏覽器對background-clip：text的支持，並提供SVG做爲非支持瀏覽器的後備，這是Tim Pietrusky的polyfill所作的，相比使用背景圖像並使用clippath剪切它，使用SVG模式可以更好的實現剪輯的圖像填充文本背景。在下一節中，咱們將在SVG中使用模式填充文本。

使用SVG <pattern>來填充文本背景

所以，咱們能夠將背景或圖案應用於文本的另外一種方法是使用圖案填充文本，而不是使用背景圖像並將其剪切到文本。對於本演示，咱們將使用SubtlePatterns提供的圖案填充文本。

當你使用裝飾字體時，使用圖像並將其剪切爲文本多是一個很好的選擇，就像咱們在第一個演示中所作的那樣，或者咱們想用一個大的圖像做爲文本的背景，由於這個背景扮演了一個重要的角色。但有時候，咱們想要作的只是在文本中添加一個簡單而細微的模式，使其具備額外的美妙觸感，使其不那麼沉悶。在這種狀況下，使用SVG，咱們能夠像在上一節中定義剪切路徑同樣定義模式，而後咱們可使用該模式填充文本。

與以前的演示相似，咱們有一個SVG元素，其中爲可訪問性添加了標題，咱們想要用模式填充的文本元素，以及咱們將用於定義模式的defs元素。該模式由一個圖像組成，並具備一個ID，當咱們想要引用它並將其應用於咱們的文本時，咱們將使用該ID。咱們將在文本的fill屬性中引用模式，或者經過文本的CSS fill屬性引用模式。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="700" height="400" > 
	<!-- add title for accessibility -->
	<title>Applying a patterned background to text in SVG</title> -->
	<!-- Source: http://lea.verou.me/2012/05/text-masking-the-standards-way/ -->
	<defs>
		<pattern id="filler" patternUnits="userSpaceOnUse" width="400" height="400" >
			<image xlink:href="img/purty_wood.png" width="1200" height="600" preserveAspectRatio="none" />
		</pattern>
	</defs>
	<text x="100" y="70%" font-size="200" fill="url(#filler)">WOOD</text>
</svg>
複製代碼

與以前的演示相似，您能夠經過CSS引用模式，以下所示：

text {
    fill: url(#filler);
}
複製代碼

查看demo4，支持全部現代瀏覽器：使用SVG填充文本背景。

此時，值得注意的是，您不只能夠將圖像用做SVG模式，並且正如咱們以前提到的那樣，漸變也是圖像，您還能夠建立SVG漸變並使用它來填充文本，而不是：

在SVG中建立和使用漸變很簡單。漸變被建立爲radialGradient或linearGradient元素，並被賦予一個ID，而後在fill屬性或CSS屬性中引用，就像咱們使用上面的同樣。這是一個簡單的例子，其中使用漸變來填充文本。

查看demo5 使用漸變填充文本背景

固然，也能夠將漸變設置爲容器的背景圖像，而後咱們可使用clippath剪切背景，就像咱們在上一節中所作的那樣。

使用SVG <mask>將紋理應用於文本

就像咱們可使用CSS mask-image屬性將圖像蒙版應用於元素同樣，咱們也能夠應用相同的蒙版概念並使用SVG蒙版得到相同的效果。

圖像的不透明和透明區域將決定元素的繪製位置，就像咱們在上一節中使用CSS mask-image屬性看到的那樣。可是，CSS圖像蒙版和SVG圖像蒙版之間存在一個重要區別：與CSS蒙版不一樣，SVG蒙版使用蒙版中的亮度值來肯定被遮罩的內容，而不是阿爾法值。所以，由黑色和透明區域組成的圖像，例如咱們上面使用的噴濺遮罩，將必須被由白色和透明區域組成的圖像替換。所以，若是咱們要從新建立與上面建立的相同的潑濺文本效果，咱們將不得不使用以下所示的蒙版圖像：

能夠在Photoshop中輕鬆將Alpha通道圖像蒙板轉換爲亮度圖像蒙版，應用白色覆蓋將黑色區域變爲白色，這就是我用適合SVG蒙版的CSS圖像蒙版替換CSS圖像蒙版的方法。在上面的圖像中可見的淺灰色區域其實是透明的，我只是給了圖像這個背景，因此你能夠看到白色的飛濺，不然在這篇文章的白色背景上看不到。

如今，就像咱們定義SVG剪切路徑和模式同樣，咱們能夠以相似的方式定義咱們的蒙版並將其應用於咱們的文本。

咱們將建立一個包含在SVG mask元素內的圖像，該元素將得到一個ID以即可以引用它，而且mask將被包裝在defs元素內，該元素用於定義咱們的蒙版而不直接渲染它。

因此它就像是說：咱們定義一個SVG mask，它是一個帶有如下URL（上面的亮度mask的URL）的圖像，而後咱們將這個mask應用到咱們的text元素上的mask屬性，固然也可使用mask屬性的CSS。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="380" > 
	<!-- add title for accessibility -->
	<title>Adding Texture to Text using SVG Masks</title>
		<defs>
			<mask id="mask">
				<image width="1200px" height="1200px" xlink:href="img/splatter-mask_luminance.png" preserveAspectRatio="none"/>
			</mask>
		</defs>
	<text x="50" y="70%" font-size="168" fill="white" mask="url(#mask)">WATERCOLOR</text>
</svg>
複製代碼

爲了完成效果，我將水彩背景添加到主svg元素，使其看起來像文本被混合到該背景中。

查看demo6在各瀏覽器中的效果。

使用HTML5 <canvas>建立紋理文本

咱們將要討論的最後一種技術使用HTML5 <canvas>元素來建立上述效果。使用<canvas>，您還能夠將元素「剪切」爲另外一個元素的形狀，使用紋理「填充」文本，並經過更改畫布的context的 globalCompositeOperation屬性的值，將相似蒙版的效果應用於文本。

在咱們瞭解它以前，讓咱們定義咱們的標記，由於它與咱們將要介紹的3種技術的標記相同。

咱們有一個canvas元素，咱們爲其指定高度和寬度，在結束標記以前，咱們將添加一個文本內容，供屏幕閱讀器閱讀，以及禁用JavaScript的瀏覽器回退。但須要注意的是，當JavaScript被禁用時，Firefox不會將文本顯示爲畫布的後備，這多是一個錯誤。

<canvas id="canvas" width=1000 height=600 >
 
  WATER
</canvas>
複製代碼

如今咱們準備好了標記，讓咱們開始繪製一些帶紋理的文本！

對於咱們的第一個演示，咱們將在畫布上建立一個文本，並使用咱們選擇的模式填充它以得到如下結果：

咱們將得到canvas元素及其繪圖context，而後咱們將建立一個圖像，並將該圖像用做文本的填充樣式。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//create image we're going to use as a fill pattern var img = document.createElement("img"); img.src="img/water.jpg"; //draw the text img.onload= function(){ drawText(); } //function that draws the text and fills it with the texture from the img function drawText() { ctx.font = "bold 200pt Oswald"; ctx.fillStyle = ctx.createPattern(img, 'repeat'); ctx.textAlign = 'center'; var x = canvas.width / 2; ctx.fillText("WATER", x, 400); ctx.fill(); } 複製代碼

那麼，讓咱們回顧一下上面的代碼。全部繪圖都發生在drawText函數中。咱們將在context的font屬性中定義字體樣式，而後使用context的createPattern方法，咱們將從以前建立的圖像中建立一個模式，而後咱們將該模式設置爲 fillStyle屬性的值，固然，它肯定字體的填充樣式。最後但並不是最不重要的是，咱們實際上將使用fillText方法在畫布上繪製文本，該方法接收一個字符串，它是咱們想要繪製的文本的內容，以及一些x和y座標，正如您可能已經猜到的那樣，肯定將在畫布上繪製文本的位置。

查看demo7

這裏有一點須要注意：當你在畫布中使用自定義字體時，你可能沒法看到自定義字體呈現，由於畫布繪圖可能在字體加載以前發生。要解決這個問題，您可使用字體加載器，如Typekit和Google開發人員開發的 Web Font Loader，並在加載字體後在畫布上繪圖：

WebFontConfig = {
	google: { families: [ 'Oswald' ] },
	fontactive: function() {
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var img = document.createElement("img");
		img.src="img/water.jpg";
		
		img.onload= function(){
			drawText();
		}

		function drawText() {
			ctx.font = "bold 200pt Oswald";
			ctx.fillStyle = ctx.createPattern(img, 'repeat');
			ctx.textAlign = 'center';
			var x = canvas.width / 2; 
			ctx.fillText("WATER", x, 400);
		}
	}
};
(function() {
	var wf = document.createElement('script');
	wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
	 '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
	wf.type = 'text/javascript';
	wf.async = 'true';
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(wf, s);
})();
複製代碼

演示文件都將使用這種技術，但我會在這裏保持簡單，只在下面的示例中向您展現該技術的相關功能。

如今，轉到下一個技術，咱們將經過更改context的globalcompositeOperation屬性的值在畫布上建立相似剪輯的效果。最終結果以下所示：

canvas context的附帶屬性globalcompositeOperation，它定義了所謂的「源」和「目標」之間的複合操做。也就是說，它定義了您想要繪製的內容將如何與在畫布上繪製的內容混合。源是您要繪製的內容，目標是在設置globalCompositeOperation屬性以前已經繪製的內容。咱們能夠在現有形狀後面繪製新元素或形狀，並使用此屬性清除某些區域，甚至從畫布中清除部分。

globalCompositeOperation可使用16個值中的一個，這些值中的每個都在MDN的可視示例中清楚地展現，所以若是您還不熟悉此屬性，請檢查一下，由於這些示例將幫助您更好的理解。這是每一個值的結果的屏幕截圖。在演示的源代碼中，目標是首先在畫布上繪製藍色矩形，源是在設置globalCompositeOperation值後繪製的紅色圓圈。

此屬性的source-in值能夠用簡單的翻譯爲「僅繪製它們相交的源和目標的部分/區域」。所以，若是您有兩個元素，一個是已經繪製的，另外一個是您想要繼續繪製的元素，那麼結果將是隻繪製這兩個元素相交的區域。

爲了更好地理解這一點，讓咱們立刻進入代碼。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var img = document.createElement("img");
img.onload = function () {
   drawText();
}
img.src="img/fire.jpg";
function drawText() {
  
    // put text on canvas
    ctx.font = "bold 180pt IM Fell Great Primer SC";
    ctx.fillStyle = 'white';
    ctx.textAlign = 'center';
    var x = canvas.width / 2;
    ctx.fillText("FIRE", x, 325);

    // use compositing to draw the background image only where the text has been drawn
    ctx.globalCompositeOperation = "source-in";
    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
}
複製代碼

在上面的代碼中，在drawText函數中，咱們有3個「sections」，用於定義將在畫布上繪製的結果。第一部分是咱們定義文本的地方，包括它的全部樣式，而後咱們繼續使用fillText方法繪製它。接下來，咱們將context的globalCompositeOperation設置爲source-in。而後，咱們在畫布上繪製圖像。

因此你看，在這種狀況下，「source」是咱們想要在設置globalCompositeOperation（圖像）以後繪製的元素，而「destination」是咱們在設置它以前繪製的文本。經過將值設置爲source-in，咱們告訴瀏覽器僅在此圖像與文本相交的區域中繪製圖像，這正是咱們想要得到的效果。

一旦你瞭解globalCompositeOperation的每一個值，你能夠快速輕鬆地開始使用它們，而且再次確保檢查MDN上的可視化示例，由於它們有不少幫助。

當你檢查它們時，你會注意到若是咱們將值設置爲source-atop，結果對於咱們的演示也是同樣的。 source-atop告訴瀏覽器繪製與目標（文本）相交的源（圖像）的部分/區域，並繪製目標的其他區域，即便那些與源不相交的區域，也在咱們的這種狀況，也會產生咱們想要的效果。

查看demo8

注意：在撰寫本文時，並不是全部瀏覽器都支持全局複合操做屬性的全部值。

最後，咱們將使用canvas建立另外一個效果，但此次咱們將在文本中添加一些紋理以將其混合到背景中，就像咱們以前使用SVG和CSS的技術同樣。該演示將以下所示：

咱們將使用帶有alpha通道的圖像做爲咱們的「蒙版」，咱們但願僅在與圖像的黑色區域相交的位置繪製文本，並在圖像透明的地方「擦除」圖像。所以，咱們但願咱們的源和目標只能在它們相交的地方繪製。根據這個邏輯，以及globalCompositeOperation值的上述截圖，咱們將要使用source-in值來獲取咱們所追求的結果。

下面是咱們用做「蒙版」的圖像。黑色區域是圖像與文本相交的位置。就像咱們在CSS masking部分中所作的那樣，您能夠想象文本的一個圖層和此圖像的另外一個圖層，將它們放在彼此的頂部，而後擦除圖像或文本不相交的部分，相交的部分，就是想要得到的最終效果。

Javascript代碼與上面的代碼相同，只有globalCompositeOperation的值不一樣，因此咱們將直接跳到演示，在那裏您能夠查看源代碼並體驗它。

查看demo9

在這裏，咱們再次爲畫布添加了背景，使混合效果更加逼真。咱們有「劃痕」的背景和有劃痕的文字很好地融合在一塊兒。

結語

我但願你從這篇文章中學到了一兩種新技術。我認爲咱們已經涵蓋了使用CSS和HTML建立紋理文本的大多數可能方法。我最喜歡的技術必須是SVG，由於它具備更普遍的瀏覽器支持。當全部瀏覽器都支持CSS masks和background-clip的文本值時，咱們能夠開始使用它們而沒必要過度擔憂提供回退，而後CSS絕對是咱們的最佳選擇。

我但願你發現這篇文章頗有用。謝謝你的閱讀！=）

你知道在文本中添加紋理的其餘技巧嗎？若是有，請確保在下面的評論中分享！