How to apply inverse text mask with CSS
clipping, css, html, mask
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/.
Problem
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: ``` 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: Has anyone tried it?