Search code examples
htmlcssmaskclipping

How to apply inverse text mask with CSS

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

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

enter image description here

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

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

enter image description here

Has anyone tried it?

Solution

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

    • The outermost element contains the background-image
    • The middle element contains the middle image
    • The inner element contains the text, and has the same background image as the outermost element, masked with background-clip:text; like on your first example.

    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/.