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

Question

What I need is a black box filled with transparent text over a background image.

See this example: Example

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

Webkit: http://www.webkit.org/blog/181/css-masks/ Old IE: http://msdn.microsoft.com/en-us/library/ms532982(v=VS.85).aspx — biziclop, Oct 28 '11 at 12:51

score 3 · Accepted Answer · answered Oct 28 '11 at 12:57

3

There is no cross-browser solution yet, only webkit seems to support masks.

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

answered Oct 28 '11 at 12:57

NCode

score 1 · Answer 2 · answered Oct 28 '11 at 12:59

1

Here is a great guide, showing you just want you need.

However, the solution as with all alpha masks, isnt completely cross browser compatible Im afraid!

answered Oct 28 '11 at 12:59

Graeme Leighfield

2 Answers2