html - 如何使用 CSS 应用反向文本掩码

Question

我会尝试用图片来解释我的问题。我们开始吧。

1 - 这张图片显示了遮盖图片的文本，到目前为止还不错，我可以使用以下代码:

font-size: 120px;
background: url(image-to-be-masked.jpg) repeat 0 0, white;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

2 - 这另一个图像，文本产生相反的效果，只留下透明的文本区域。这就是我想要的:

有人试过吗？

Answer 1

我不认为 CSS 可以做到这一点。但是您可以使用三个不同的嵌套元素将其组合在一起:

• 最外层的元素包含背景图片
• 中间元素包含中间图片
• 内部元素包含文本，并具有与最外部元素相同的背景图像，并使用 background-clip:text; 进行屏蔽，就像您的第一个示例一样。

这可行，但有点麻烦，因为您必须补偿蒙版背景位置才能达到预期效果。这是一个例子:http://jsfiddle.net/dzkTE/ .