How to apply inverse text mask with CSS

Question

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:

<

Answer 1

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