CSS text transparency through multiple layers

Question

I have it in my mind to create:

A patterned fixed background
A white background layer overtop of the patterned background
"transparent" text that is also transparent through the white background so the patterned background as the text.

For those wiser than me out there... is this even possible? If so how?

The text transparency is easy enough rgba(0,0,0,0.1) but I can't get it beyond the white layer to the pattern.

The code so far:

#inner-header {
background: url('../images/white.png'), url('../images/angusplaid.png');
position: fixed;
z-index: 1;
}

#logo a {
color: rgba(0,0,0,0.1)
}

Is there a way to make the white background transparent only where the text is? I have my doubts but would love to have it solved either way.

Cheers.

Welcome to SO, please provide the code you have tried and even better, put it in a fiddle or other so we can play with it and find a solution for you. — web-tiki, May 26 '14 at 20:46
Thanks for the quick responses. I'll get the code up in a jiffy — user3677609, May 26 '14 at 21:08
See http://stackoverflow.com/questions/22314322/cutting-a-triangle-out-of-div-but-have-it-horizontally-centered/22314879#22314879 for something to get you started. — Etheryte, May 26 '14 at 21:55
thanks @Nit. That's exactly what I was looking for, albeit not in svg. — user3677609, May 26 '14 at 22:59
See [http://css-tricks.com/image-under-text/](http://css-tricks.com/image-under-text/), as there's currently no cross-browser solution for this other than SVG. — Etheryte, May 26 '14 at 23:22

score 0 · Accepted Answer · edited Jan 16 '17 at 18:02

You have various options:

The first is with CSS background-clip.

Browser support: See http://caniuse.com/#search=background-clip (All & IE 8+, -webkit- prefix for Android 2.x)
How-to (with fallbacks & catches): http://css-tricks.com/image-under-text/

The second is with SVG (SVG.js)

Browser support: See https://svgdotjs.github.io/compatibility/
How to: See https://svgdotjs.github.io. Copy the example on the homepage. The <name> you enter in var drawing = SVG('<name>') must be the ID of the div you want to ouput to.

I'm sure some text to bitmap options must exist too.

CSS text transparency through multiple layers

1 Answers1