如何应用反文本掩码与CSS [英] How to apply inverse text mask with CSS

问题描述

我会尝试用图片解释我的问题。这里我们去。

I'll try to explain my question with images. Here we go.

1 - 这个图像显示了屏蔽图像的文本，到目前为止这么好，我可以用下面的代码：

1 - This image shows the text masking an image, so far so good, I can do with the following code:

>

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

2 - 这其他图像，文本创建相反的效果，只留下透明的文本区域。这是我想要的：

2 - This other image, the text creates the opposite effect, leaving transparent only the text area. This is what I want:

有人试过吗？

推荐答案

认为CSS可以做到这一点。但您可以使用三个不同的嵌套元素在一起：

I don't think CSS can do that. But you can hack it together using three different nested elements:

• 最外层的元素包含background-image


• 中间元素包含中间图像


• 内部元素包含文本，并且具有与最外面的元素相同的背景图像，用



这是有效的，但是有点麻烦，必须补偿掩模背景位置以实现期望的效果。以下是一个示例： http://jsfiddle.net/dzkTE/ 。

This works, but is a little cumbersome, as you'll have to compensate the masks background-position to achieve the desired effect. Here is an example: http://jsfiddle.net/dzkTE/.

这篇关于如何应用反文本掩码与CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！