HTML/CSS: "See Through Background" Text?

Question

Ok, is this possible.

I have a background image. On top of that, I have a transparent grey box for content. I'd like to have title at the top in text, that is basically the letters exposing the background. So, the text removes the grey box and lets the background show through.

The only hacky way I can see is create an image with the letters transparent on a background the same grey color, and then try to somehow align that with the grey box.

Is there another - better - way?

It may help to use CSS 3 opacity property. http://www.w3schools.com/css/css_image_transparency.asp — Celeritas, Jun 08 '12 at 23:22
@Celeritas - Consider avoiding linking to w3schools here at Stackoverflow; it's a "strained" relationship, let's say. Link to the specifications, to sites like HTMLDog, Sitepoint... Just not w3schools (see http://w3fools.com). FYI — Jared Farrish, Jun 08 '12 at 23:31
@minitech - I'd sure like more information on what you're thinking about. — Jared Farrish, Jun 08 '12 at 23:32
@JaredFarrish: `-webkit-background-clip: text` with multiple backgrounds. Maybe. I'm still working it out :P (Although, if the background is static, then it will be very simple.) — Ry-, Jun 08 '12 at 23:32
@minitech - Ah, very cool. [Demo here](http://trentwalton.com/bgclip/), plus webkit's [blog entry on the subject](http://www.webkit.org/blog/164/background-clip-text/). — Jared Farrish, Jun 08 '12 at 23:38
@JaredFarrish: I say hacky because it requires me lining up the image with the grey content div. Ick. — mtyson, Jun 08 '12 at 23:43
Is the background static? Or could it move if, for example, you resize the browser window? Do you have an image showing the effect? — thirtydot, Jun 08 '12 at 23:44
@JaredFarrish acknowledged, consider http://www.css3.info/introduction-opacity-rgba/ instead — Celeritas, Jun 08 '12 at 23:44
@thirtydot: It can move around relative to the grey content box. — mtyson, Jun 08 '12 at 23:45
So the text is a cutout only for removing the gray containing box to show the underlying background image, but otherwise will not affect anything else? Like an alpha channel? — Jared Farrish, Jun 08 '12 at 23:50
Would you be interested in a JavaScript solution to support more browsers? Or would you be happy with a WebKit-only pure CSS solution? — thirtydot, Jun 08 '12 at 23:52
@thirtydot - I'm with Jared Farrish, I'd like to see it even if it involves JS. — mtyson, Jun 09 '12 at 00:35
What I was imagining is what jasssonpet's fiddle looks like in Chrome. Is that what you were after? — Jared Farrish, Jun 09 '12 at 00:41
You can also create a reversed font face (where each glyph is cut out of a solid block instead of the glyph itself being the solid area), and use @font-face. — reisio, Jun 09 '12 at 01:21

jasssonpet · Accepted Answer · 2012-06-09T17:53:16.713

21

One way is to use -webkit-background-clip: text;: demo here (webkit only obviously).

Using position, we can sync both backgrounds:

#container, #container h1 {
    background: url(bg.png)
}

#container {
    position: relative;
}

#container #gray {
    background: rgba(0,0,0,.8);
    padding-top: 8em;
}

#container h1 {
    font-size: 8em;
    padding-top: /* padding + border of div */;
    position: absolute;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

Or you could use the same approach and apply a svg mask, that will work in all modern browsers.

edited Jun 09 '12 at 17:53

answered Jun 08 '12 at 23:58

jasssonpet

2,079
15
18

2

That's actually pretty nifty in Chrome. – Jared Farrish Jun 09 '12 at 00:05
That looks perfect in Webkit - can you elaborate on how to use the CVG for non-webkit? – mtyson Jun 09 '12 at 17:10
1

@mtyson http://jsfiddle.net/NT7z7/12/ You should use some js to generate the SVG, to keep the source clean. – jasssonpet Jun 09 '12 at 17:50
background-clip: text is also available in FF49. -webkit-text-fill-color is also apparently supported in FF49, if layout.css.prefixes.webkit are set to true, which are set by default since version 49. https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color – Maciej Krawczyk Jun 22 '17 at 07:36

HTML/CSS: "See Through Background" Text?

1 Answers1

Linked