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.

开发者_如何学JAVA

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