Divs with transparent text in CSS?

I’ve been asked to create a CSS (non-HTML5) based site that has a filled div with a cutout that shows an image underneath it.

There are additional overlays and other images which makes using static images a pain. Plus, I suspect that I am going to need to be able to scale the background as the browser window changes size.

I realize that I can create an image of the GROW text and simply place it on top of the background image, but I would rather see if this effect can be accomplished “for real.”

This needs to work in IE8, 9, and FF 4. I can fallback to another effect for older browsers.

Any suggestions?

That affect can be achieved using CSS 3 image masking. However, at the moment, only webkit supports the property. I would implement something like this, then use a fallback for other browsers until everybody catches up to speed.

As a side note:You can also increase the CSS adoption be using ChromeFrame, or something similar

An Example from that link:

SVG images can be used as masks. For example, a partially transparent circle can be applied as a mask like so:

<img src="kate.png" style="-webkit-mask-image: url(circle.svg)">

I ended up using two images without any holes or transparency. It's a hack but works in all browsers.

html5 or something like a gpd as php gui. But html5 doesnt work with ie8 or before, at least if the client doesnt have the chrome frame of google inc.

If you can play with mix-blend-mode property, there is simple solution that work on all modern browsers.

http://codepen.io/sajijohn/pen/OXEgkj

HTML

<h1>SUPER-FLY</h1>

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:900);
*{
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
html, body {
  height: 100%;
  width: 100%;
}
body {
  background: url(http://unsplash.it/3200/1600?image=973) no-repeat no-repeat center center;
  background-size: cover;
}
h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: raleway, sans-serif;
  font-size: 80px;
  line-height: 60px;
  text-align: center;
  padding: 20px;
  /*/////////MAGIC//HERE////////*/
  background: #fff;
  color: #000;
  mix-blend-mode: color-dodge;
  /*////////////////////////////*/
}

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode