Divs with transparent text in CSS? - css

Question

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?

Answer 1

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)">

Answer 2

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

Answer 3

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.

Answer 4

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