You have an object (span or div e.g.) with text. And this text should mask out the colored background of the object so that you can see the very background (of body element e.g.).
I know there is "mask-image". But they don't want to develop this CSS3 technique further. Is there a Javascript solution maybe so anyone can see this?
Is there any chance to do this cross-browser?
It looks like the closest you can get to full cross-browser support (without using images for each character in the text) is the very-limited tricks shown here. These tricks wouldn't work with a photographic bg image though.
If you don't require support for IE8 or earlier, you could investigate doing this in SVG or Canvas. Note however that Android prior to 3.0 doesn't support SVG, which rules out as much as 85% of existing Android devices.
Webkit has a proprietary background-clip:text style, but it only works on Chrome and Safari.
Using color:transparent for the text turned out to be completely useless for this.
On the whole, the best bet may be canvas, especially if you can find a JS library or jQuery plug-in that provides a VML alternative for IE8 and earlier (assuming the VML solution supports text masks), or if you can provide a graceful-degradation fallback option for IE8 and earlier that looks adequate even without a text mask.
Another solution that's easily overlooked: If you can dynamically render an image on the server using the current text on the page (caching it as needed), and then serve that image to the client, then there are no cross-browser issues to deal with. This could possibly be done in PHP using the GD graphics library, for instance.
Can't think of a technique to do this in javascript or html. However, an approach that could be used (although not entirely desirable - I realize that this is going to be time consuming) would be to create a transparent .png for each letter, set the background of the letter to transparent and the rest of the image to some color, and then use those. You would have to make a whole set for each color you wished to use. You could also just make an image which was one word in a .png and use that which would be easier. This would be the only current way to get this to work with all browsers including older ones such as IE6 where the newer techniques are not available.
The reason, in my opinion, that this will not currently work, is that when you have text inside of a <div> or <span> even if the text is transparent, it would merely default to the color of the <div> or <span>. If their background was set to transparent, then nothing would even show up. Conversely, if their color was set, the text would not show up because it would merely inherit that color.
