Proposal for clipping background images to foreground text

I mentioned this back on May 9, 2007.

http://lists.w3.org/Archives/Member/w3c-css-wg/2007AprJun/0197.html

The original email (for those who can't read it) was:

"Random idea I just had that may or may not be cool. You be the  
judge. :)

background-clip could take the value "text". This would cause the  
background image to draw clipped to the text glyphs inside your box.

This has nice synergy with multiple backgrounds (since you could  
specify a border-clipped background image and then an additional text-  
clipped background image).

It has nice synergy with foreground color too, since the color itself  
could be partially transparent (to reveal some of the text-clipped  
background image) or fully transparent."

This is now implemented in the latest nightly builds of WebKit.  You  
can read more about it here.

http://webkit.org/blog/164/background-clip-text/

Assuming people like the idea, the part that needs hammering out is  
what exactly you are clipping to.  Right now I still clip to the  
border even when the value of text is specified (so you can't draw the  
background into text that spills outside of the border box).  I also  
don't descend into e.g., positioned children.  Decorations like  
underline/overline and shadows are included in the clip region.

dave
(hyatt@apple.com)

Received on Tuesday, 25 March 2008 10:11:00 UTC