如何实现挖空文字效果

在网络上实现**挖空文字**（即文字看起来被挖掉，可以透过文字看到背景）效果有几种方法。有一种比较新的方法，浏览器支持度不错，非常有趣。但我们还是会全面介绍一下。

直接用Photoshop制作

就像其他任何东西一样，你可以用平面图形来伪造它。有时候值得考虑一下显而易见的方法。缺点是它不具有动态性/难以更改。你不能复制粘贴文本。图片文件大小可能很大，尤其是在追求更高分辨率的时候。等等等等。但是，你可以这样做，而且它在任何地方都能工作。

-webkit-background-clip: text;

这是一个非标准属性，但它被发明出来就是为了实现这个目的。美妙之处在于，你可以将其与-webkit-text-fill-color: transparent;配对，这样你只在能够进行剪裁的浏览器中“隐藏”文本。几年前，Divya Manian 记录了这一点。

.clip-text-maybe {
  
  /* if we can clip, do it */
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;

  /* what will show through the text
      ~ or ~
     what will be the background of that element */
  background: whatever;

  /* fallback text color
      ~ or ~
     the actual color of text, so it better work on the background */
  color: red;
 
}

这是真正的网页文本，因此它具备了所有可访问性、可搜索性和易于更改等特性。

以下是Jintos使用此方法的一些有趣示例

查看 Jintos 在 CodePen 上创作的笔 -webkit-background-clip:text CSS 效果（@Jintos）。

像任何其他背景一样，如果需要，你可以固定其位置。以下是Richard Hayes对此的演示

查看 Richard 在 CodePen 上创作的笔 带固定背景的 Webkit 剪裁（@strawstack）。

SVG <pattern> 填充

SVG 也可以通过其<text>元素包含真实的文本。SVG 文本可以使用任何填充，包括图案。而图案可以使用图像。所以……挖空文字！

例如：

<svg>
  <pattern id="pattern" patternUnits="userSpaceOnUse" width="750" height="800">
    <image width="750" height="800" xlink:href="image.jpg"></image>
  </pattern>
  <text x="0" y="80" class="headline" style="fill:url(#pattern);">background-clip: text | Polyfill</text>
</svg>

你可以在任何 HTML 中直接使用它。以下是 C.Y. Park 的一个示例

查看 C.Y. Park 在 CodePen 上创作的笔 带渐变和 GIF 的 SVG 文本剪裁（@cypark）。

Lea Verou 也记录了此技术。

使用 SVG 填充 CSS

Tim Pietrusky 创建了一个用于-webkit-background-clip的 polyfill，它使用 SVG 方法作为回退。CSS 版本肯定比 SVG 版本更容易快速编写，因此在获得更好的浏览器支持的同时，这似乎是一个不错的选择。

查看 Tim Pietrusky 在 CodePen 上创作的笔 -webkit-background-clip: text Polyfill（@TimPietrusky）。

mix-blend-mode: screen;

这是我以前从未见过的新的方法！CSS 混合 比较新。它允许你像在 Photoshop 中分层样式一样（例如，“屏幕”、“正片叠底”、“亮光”等）将元素混合到其他元素之上。

如果操作正确，你可以在文本的正上方混合图像，而不会影响“真实”背景。我第一次看到 Giana 在 CodePen 上这样做

查看 Giana 在 CodePen 上创作的笔 Firefox 中的 CSS 渐变文本（@giana）。

它是这样工作的

1. 将文本设置为黑色。
2. 用新的文本背景覆盖整个文本，并使用mix-blend-mode: screen;。
3. 然后用相同文本的新副本（白色）和页面相同的背景覆盖它，并使用mix-blend-mode: multiply;。

这将只留下带有“挖空”背景的文本可见。如果你使用pointer-events，你也可以使文本可点击和可选，尽管很难看到你在做什么。

这里的优点是，这是一种纯 CSS 方法，也可以在 Firefox 中使用，而不仅仅是-webkit-的东西。