Masking text for transparency in CSS (cross-browser, not IE-6 or lower)

Question

I need a black box filled with transparent text above the background image.

See this example: Example

Is it possible? If so, how can I do this?

+4

George boot Oct 28 '11 at 12:49

2 answers

Here is a great reference showing what you just want what you need.

However, the solution, as with all alpha masks, is not fully compatible with the browser. I'm afraid!

+1

Graeme leighfield Oct 28 '11 at 12:59

NCode · Accepted Answer · 2011-10-28T12:57:28+0000

While there is no cross-browser solution, only webkit seems to support masks.

-webkit-mask-image: url(/path/to/mask.png);