Text masking...

I know I'm probably going to get a lot of scrutiny from this post, but I thought, "What the hell."  It's just a simple idea, although it'd be very hard to implement.  What I'm suggesting is a special background type for text-based elements in CSS.

Take the heading tags - h1 through h6.  Wouldn't it be nice to create a text mask out of these?  In other words, what I'm suggesting is making the foreground color of the text itself transparent and then having a special background show through in the form of the text, thus making the text act as a masking element.

Consider the following image [1] and then you might have an idea of what I'm talking about.  Yes, it is possible to create the same thing as a stand-alone .jpg or .gif and then simply upload it to the site.  However, what if you wanted to use the same background on several headings, per se?  Then you'd have to create a new .(jpg|gif) for each heading displayed in this way.  In my example, you could simply use the same background over and over again with different text.  That would definitely minimize server load, especially if you had a ton of applicable headings in the same page.  Instead of loading all those .(jpg|gif)s, you'd have one pre-cached image used over and over again.

There are other uses for this, but that I'll leave to your imagination.  Again, I know it's not an easy idea to implement and it is probably a bad design idea.  But, it'd be fun and I'm sure someone out there, including possibly me, could put it to good use.

In my opinion, one way to implement this would be by adding a new property to the background property set.  This property would be "background-type".  Such values for that might be:
  [2] text - Background image is shown only inside textual outlines (as with my idea).
  block - Background images shown in the default way - covering the rectangular area of the containing element.
  inherit - Inherited display from the containing element's background properties previously set.
  auto - Usually defaults to "block".
  none - No background at all; underlying backgrounds will show through this element.
  [3] none-block - Hides the background of the rectangular area of the element - reverse effect of the "block" property.  In most cases, this is identical to "none" or not specifying a background at all.  However, this also works if the container element has a background and you don't want that background to show through this element.  It's like specifying a background color to hide the background.  In many cases, that might be easier.
  [4] none-text - Hides the background of the background of the contained text, but shows the background in the block area.
Again, people, this is merely a suggestion.  You'd have to really see it in action to understand what I mean, but CSS doesn't currently allow for my ideas to be implemented THAT I KNOW OF.  If there is a way to do exactly what I'm suggesting with CSS ONLY, do let me know.

Thanks.

writeup - http://misc.hyponiqs.com/CSS-Ideas/text-masking.htm

[1] http://misc.hyponiqs.com/CSS-Ideas/images/Text-Masking-Example.jpg
[2] http://misc.hyponiqs.com/CSS-Ideas/text-masking.htm#text
[3] http://misc.hyponiqs.com/CSS-Ideas/text-masking.htm#none-block
[4] http://misc.hyponiqs.com/CSS-Ideas/text-masking.htm#none-text