background-clip
text

2008 年 3 月 20 日

作者：Dave Hyatt

CSS3 引入了一个名为 background-clip 的属性，它可用于将背景裁剪到边框、内边距或内容框。我将此属性扩展了一个第四个值 `text`，该值使背景图像裁剪到前景文本（包括装饰和阴影）。前景内容的形状（包括内容中的 Alpha 透明度）将作为蒙版应用于裁剪框的背景绘制。

这里有一个例子

<div style="background: url(https://webkit.ac.cn/wp-content/uploads/green-background.png), black; border:5px solid black; padding:5px; -webkit-background-clip: text, border; color: transparent">
This background clips to the text.
</div>

它看起来是这样的（如果您在 ToT 中尝试）

此背景裁剪到文本。

此效果可与 -webkit-text-stroke 和透明的 -webkit-text-fill-color 结合使用，创建带有描边轮廓且“填充”了背景的文本。

此外，此视觉效果可与固定背景一起使用，使文本看起来像是“在视口中打了一个洞”。