Divs with transparent text in CSS?

Question

I was asked to create a site based on CSS (not HTML5), on which a div is filled with a cutout that displays the image below it.

There are additional overlays and other images that make using static images a pain. In addition, I suspect that I will need to be able to scale the background, as the browser window is resizing.

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

This should work in IE8, 9 and FF 4. I can refuse another effect for older browsers.

Any suggestions?

Answer 1

In the end, I used two images without holes or transparency. This is a hack, but it works in all browsers.

Answer 2

This effect can be achieved by masking CSS 3 images . However, only webkit is currently supported. I would implement something similar, and then use the reserve for other browsers until everyone catches up with speed.

As a side note: you can also increase CSS adoption using a ChromeFrame or something similar.

An example from this link:

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

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

Answer 3

html5 or something like gpd like php gui. But html5 does not work with ie8 or earlier, at least if the client does not have a google inc chrome frame.

Answer 4

If you can play with the mix-blend-mode property, there is a simple solution that works in 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