用 CSS 给文字加特效：渐变、图案，让你的文字更吸睛！

今天就来教你一个简单的小技巧，用 CSS 给文字添加渐变和图案，让你的网页文字更生动更有趣！

秘诀就在于：把文字设为透明，然后用 background-image 给文字设置背景装饰，最后用 background-clip 把背景装饰剪裁成文字的形状。

看看下面这些效果图：

透明文字和 background-clip

首先，我们要让文字变成透明的。这里我们用 <h1> 标签。

h1 {
  color: transparent;
} 

但仅仅这样，文字就看不到了，所以还需要用 background-clip: text。这个属性可以让背景颜色或效果只显示在文字的实际字符上，而不是填充整个文字区域：

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

现在，我们的文字是透明的，任何应用到文字上的背景效果都会被剪裁到文字本身。

在文字上设置背景渐变

让我们先尝试在标题文字上设置一个渐变效果：

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

这里，我们设置了一个从左到右的渐变，它会跨越标题文字。下面的 CodePen 演示展示了效果。

我们可以尝试各种不同的变化，例如使用不同的颜色，改变渐变方向，创建渐变图案等等。

接下来，我们尝试另一个例子，这次创建一个条纹图案：

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

下面的 CodePen 演示展示了效果。

再看一个例子，这次使用 更精美的图案。我还添加了 text-stroke 来让文字更清晰。

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;
}

在文字上设置背景图片

除了渐变效果，我们还可以使用 background-image 属性将实际图片应用于文字。这可以是任何图片，但让我们尝试使用包含重复图案的图片。以下是我们将使用的图片。

我们可以像这样将图案图片作为背景应用：

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

我添加了 background-size: contain 来强制背景图片很好地适应文字。（你可以在 如何使用 CSS background-size 和 background-position 中阅读更多关于此属性和其他大小属性的信息。有很多大小属性可以帮助你用背景图片做各种事情！）

下面的 CodePen 演示展示了效果。

h1 {
  color: transparent;
  -webkit-background-clip: text; /* Edge, Chrome */
  background-clip: text; /* Safari, FF */
  background-image: 
    url(https://uploads.sitepoint.com/wp-content/uploads/2024/03/1710934391floral.jpg);
  background-size: contain;
  -webkit-text-stroke: 1px #7512d7;
  text-stroke: 1px #7512d7;
}

仅仅为了好玩，这里还有一个使用不同背景图片的例子。在这个例子中，我使用 filter: drop-shadow() 来增强文字，而不是 text-stroke。

h1 {
  color: transparent;
  -webkit-background-clip: text; /* Edge, Chrome */
  background-clip: text; /* Safari, FF */
  background-image: 
    url(https://uploads.sitepoint.com/wp-content/uploads/2024/03/1710934441geom.jpg);
  background-size: contain;
  filter: drop-shadow(1px 1px 1px rgb(0, 0, 0, 0.8));
}

background-image vs. background

你可能已经注意到，我在上面的示例中使用了 background-image 属性，而不是 background 简写属性。两种方法都可以正常工作，但如果你使用 background，有一个需要注意的地方。你需要先声明它，然后再声明 background-clip。否则，background 属性会将 background-clip 重置为其默认值 border-box，效果就不会生效。

例如，这段代码有效：

color: transparent;
background: linear-gradient(to right, #3b82f6, #c084fc, #db2777);
background-clip: text;

这段代码会失败：

color: transparent;
background-clip: text;
background: linear-gradient(to right, #3b82f6, #c084fc, #db2777);

浏览器支持

color: transparent 和 background-clip: text 的浏览器支持已经很长时间了，但在一些浏览器中仍然需要使用供应商前缀。你会注意到，在上面的 CodePen 演示中，我们实际上使用了 -webkit- 供应商前缀，用于 Edge 和 Chrome：

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

如果你在 Edge 和 Chrome 中不使用供应商前缀，则效果会失效。

无障碍性考虑

我们使用 CSS 功能时，始终要考虑到不支持该功能的浏览器会发生什么。例如，如果我们将文字颜色设置为 transparent，但浏览器不支持 background-clip: text，那么浏览器用户就无法阅读我们的文字。（背景会填充整个文字区域，而不是限制在文字字符内。）

为了防止这种情况，我们可以将花哨的效果放在一个 @supports 块中，该块测试是否支持 background-clip：

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

对于不支持 background-clip 的浏览器，我们可以保留文本的默认黑色，或者设置另一种颜色。

还要记住，我们在这里使用的效果可能会使文字更难阅读，因此要注意这一点，不要过度使用——尤其是背景图片。还要确保文字在父元素的任何背景颜色上都清晰可读。

总结

在这篇文章中，我们介绍了两种简单的方法来增强网页文字的外观。我们可以将这些效果应用于页面上的所有文字，但这几乎肯定是一种过度使用，可能会让网站访问者感到厌烦，而不是给他们留下深刻印象。

这些效果应该适度使用并谨慎使用。明智地使用这些技巧，可以为你的网页增添一点趣味和吸引力。