CSS Transparent Text with Solid Background Surrounding Text

Question

I am searching for a pure CSS method for creating transparent text within a box(div,p,etc) where the box is filled with a color surrounding the text, but not the text itself (which would be transparent a la rgba/hsla).

Imagine a div styled in such a way that the text color within is rgba .2 alpha lvl, and the background color is solid, where the background solid color cannot be seen in the text. Of course, a solution using multiple stacked divs/blocks would be greatly acceptable, but should allow for a hover state, so the effect can be switched on/off. In using this, one could apply this div on top of an image or another div that can be seen through the letters.

SO! CSS/html works in such a way that text is always applied on top of a background (called a background for a reason), so, using transparent colors on text color does nothing but show the color of the background. I have tried creating a background with a big box shadow, in order to see if it's ever calculated differently, and it is not (and couldn't think of another method).

Instead of blabbering on with my limited CSS knowledge, I think you get the point, so give me your best! I want this to work in Chrome and Firefox at least.

Stacked Overflow doesn't allow me to put a jsfiddle without accompanied code, and I don't want to put pointless code here just to link to a 'starting point' code. Instead, here's an image explaining the obvious idea:

Answer 1

Demo Fiddle

You CAN accomplish this in CSS only, but with limited support.

You can set the -webkit-background-clip property, and -webkit-text-fill-color to transparent.

This will only work in webkit browsers however.

e.g.:

div {
   color: white;  /* Fallback */
   background: url(yourimage.png) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

See here for more on background-clip

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

If there is no background image, this property has only visual effect when the border has transparent regions (because of border-style) or partially opaque regions; otherwise the border covers up the difference.

Alternatively- you can use SVG, per this question