我們實(shí)現(xiàn)此目的的方法是使文本透明，通過(guò) background-image 屬性在文本上放置背景裝飾，并使用 background-clip 將該背景裝飾剪切到文本字符。

我們可以創(chuàng)建的一些示例如下圖所示。

圖片

透明文本和背景剪輯

為了創(chuàng)建我們想要的效果，我們首先將元素的顏色設(shè)置為 transparent 。在下面的代碼中，我們?cè)O(shè)置 <h1> 標(biāo)題的樣式：

h1 {
  color: transparent;
}

當(dāng)然，這樣做意味著文本將不可見(jiàn)，因此這本身還不夠。

下一步是應(yīng)用 background-clip: text，它將剪輯我們?cè)谠厣显O(shè)置的任何背景著色或效果，只剪輯到文本的實(shí)際字符上，而不是填滿整個(gè)文本框：

h1 {
  color: transparent;
  background-clip: text;
}

現(xiàn)在我們準(zhǔn)備施展一些魔法了。我們的文本是透明的，我們應(yīng)用到它的任何背景效果都會(huì)被剪切到文本本身。

設(shè)置文本背景漸變

讓我們首先嘗試在標(biāo)題文本上設(shè)置漸變效果：

h1 {
  color: transparent;
  background-clip: text;
  background-image: linear-gradient(to right, #218bff, #c084fc, #db2777);
}

在這里，我們?cè)O(shè)置了一個(gè)從左到右的漸變，它將跨越標(biāo)題文本。

圖片

我們可以嘗試無(wú)限的變化，例如不同的顏色、改變漸變的方向、創(chuàng)建漸變圖案等等。

讓我們嘗試另一個(gè)例子，這次創(chuàng)建一個(gè)條紋圖案：

h1 {
  color: transparent;
  background-clip: text;
  background-image: repeating-linear-gradient(-57deg, #218bff, #218bff 3px, #c084fc 3px, #c084fc 6px);
}

圖片

這是另一個(gè)例子，使用了更復(fù)雜的模式。我還添加了 text-stroke 來(lái)讓字母更加清晰。

h1 {
  color: transparent;
  -webkit-background-clip: text; /* Edge, Chrome */
  background-clip: text; /* Safari, FF */
  
/* Pattern from https://www.magicpattern.design/tools/css-backgrounds */
  
  background-color: #e5e5f7;
  opacity: 0.8;
  background-image: 
    linear-gradient(
    30deg, 
    #444cf7 12%, 
    transparent 12.5%, 
    transparent 87%, 
    #444cf7 87.5%, 
    #444cf7
  ), 
    linear-gradient(
      150deg, 
      #444cf7 12%, 
      transparent 12.5%, 
      transparent 87%, 
      #444cf7 87.5%, 
      #444cf7
    ), 
    linear-gradient(
      30deg, 
      #444cf7 12%, 
      transparent 12.5%, 
      transparent 87%, 
      #444cf7 87.5%, 
      #444cf7
    ), 
    linear-gradient(
      150deg, 
      #444cf7 12%, 
      transparent 12.5%, 
      transparent 87%, 
      #444cf7 87.5%, 
      #444cf7
    ), 
    linear-gradient(
      60deg, 
      #444cf777 25%, 
      transparent 25.5%, 
      transparent 75%, 
      #444cf777 75%, 
      #444cf777
    ), 
    linear-gradient(
      60deg, 
      #444cf777 25%, 
      transparent 25.5%, 
      transparent 75%, 
      #444cf777 75%, 
      #444cf777
    );
  background-size: 20px 35px;
  background-position: 0 0, 
    0 0, 
    10px 18px, 
    10px 18px, 
    0 0, 
    10px 18px;
  
  -webkit-text-stroke: 1px #444cf7;
  text-stroke: 1px #444cf7;
}

圖片

請(qǐng)查看我們的文章 CSS 漸變：語(yǔ)法速成課程[1]，了解更多有關(guān) CSS 漸變的實(shí)用示例。

圖片

在文本上設(shè)置背景圖像

除了漸變效果之外，我們還可以使用 background-image 屬性將實(shí)際圖像應(yīng)用于文本。這可以是任何圖像，但讓我們嘗試包含重復(fù)圖案的圖像。這是我們將使用的圖像。

我們可以將圖案圖像應(yīng)用為背景，如下所示：

h1 {
  color: transparent;
  background-clip: text;
  background-image: url(pattern.jpg);
  background-size: contain;
}

我添加了 background-size: contain 來(lái)強(qiáng)制背景圖像很好地適合文本。（您可以在如何使用CSS背景大小和背景位置[2]中閱讀有關(guān)此和其他大小調(diào)整屬性的更多信息。有各種大小調(diào)整屬性可以幫助您對(duì)背景圖像執(zhí)行幾乎任何操作！）

圖片

只是為了好玩，這是另一個(gè)具有不同背景圖像的示例。在本例中，我使用 filter: drop-shadow() 代替 text-stroke 來(lái)增強(qiáng)文本。

圖片

瀏覽器支持

瀏覽器對(duì) color: transparent 和 background-clip: text 的支持長(zhǎng)期以來(lái)一直很強(qiáng)大，但某些瀏覽器仍然需要供應(yīng)商前綴。您會(huì)注意到，在上面的示例中，我們實(shí)際上為 Edge 和 Chrome 使用了 -webkit- 供應(yīng)商前綴：

-webkit-background-clip: text; /* Edge, Chrome */
background-clip: text; /* Safari, FF */

如果您在沒(méi)有供應(yīng)商前綴的情況下在 Edge 和 Chrome 中查看演示，則效果會(huì)失敗。

輔助功能注意事項(xiàng)

如果我們使用的 CSS 功能不受任何瀏覽器支持，請(qǐng)注意可能會(huì)發(fā)生什么情況總是好的。例如，如果我們將文本顏色設(shè)置為 transparent 但瀏覽器不支持 background-clip: text; ，則該瀏覽器的用戶將無(wú)法閱讀我們的文本。（背景將填充整個(gè)文本框，而不是僅限于文本字符。）

為了防止這種情況，我們可以將我們的奇特效果放在 @supports 塊中來(lái)測(cè)試對(duì) background-clip 的支持：

@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1 {
    /* styles here */
  }
}

對(duì)于不支持 background-clip 的瀏覽器，我們可以保留文本的默認(rèn)黑色或設(shè)置其他顏色。

另請(qǐng)記住，我們?cè)谶@里使用的效果可能會(huì)使文本難以閱讀，因此請(qǐng)注意這一點(diǎn)并且不要過(guò)度 - 尤其是背景圖像。還要確保文本在父元素上的任何背景顏色下都清晰可讀。

結(jié)論

在本文中，我們研究了兩種增強(qiáng)網(wǎng)頁(yè)上文本外觀的簡(jiǎn)單方法。我們可以將這種效果應(yīng)用于頁(yè)面上的所有文本，但這幾乎肯定會(huì)造成巨大的殺傷力，并且可能會(huì)惹惱網(wǎng)站訪問(wèn)者而不是給他們留下深刻的印象。

這些效果需要適度、謹(jǐn)慎地使用。如果使用得當(dāng)，這種技術(shù)可以為您的網(wǎng)頁(yè)增添一點(diǎn)樂(lè)趣。

翻譯自：https://www.sitepoint.com/css-text-gradients-and-patterns