CrossBrowser transparent text with css

Question

What I have is a div with a background image, inside such div I have another element which is smaller and has a background colour of white. Inside this element I have text which I wan't to be transparent, so we can see background image of first div.

Tried applying color: transparent; but it doesn't seem to work. Is there reliable, css method to achieve this?

[This link](http://www.codicode.com/art/background_text_effect_css_picture_svg_mask.aspx) may help you to come to a workable solution using SVG. — ScottS, Apr 21 '13 at 19:34

score 0 · Accepted Answer · answered Apr 21 '13 at 17:39

0

You can't. The only way to do anything like this is to have the "background with the text taken out" be an image that you put on top of the background image.

answered Apr 21 '13 at 17:39

Niet the Dark Absol

320,036
81
464
592

What about javascript, would it be achievable with it? – Ilja Apr 21 '13 at 17:41
Nope. Except maybe with a canvas, but that won't work in IE8 or older. – Niet the Dark Absol Apr 21 '13 at 17:41
Ok thnx for info, thats a bummer.. I'll award you an answer once I can – Ilja Apr 21 '13 at 17:42

score 0 · Answer 2 · answered Apr 21 '13 at 19:48

0

Actually this is possible with CSS only. In your smaller element with the white backgound you could use CSS3 with a fallback for IE 6-8. For the fallback you could use a transparent PNG.

the CSS3 code for the white bg would be:

background-color: rgba(255,255,255,0.5)

I set up a codepen for you to see the code in action. http://codepen.io/DheerG/pen/tkKqC

Also if you want everything in the smaller element to be transparent, you could just use the css opacity element.

opacity: 0.6;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
/* IE 5-7 */
filter: alpha(opacity=60);

answered Apr 21 '13 at 19:48

Dheer

76
3

1

You misunderstand what the OP is desiring. He wants _the letters of the text itself_ to show the image from the background (text to be fully transparent), but the white around the text to be solid white (fully opaque; so it is like the letters are cut out of it). Your solution just makes the text and the white fade some amount, not achieving that effect. – ScottS Apr 22 '13 at 01:43
Now that you mention it what may have been what that question means. The portion of the question about smaller element with a white background threw me off I think. Hence I assumed the OP wanted to have the parent div transparent and not have the children inherit the opacity. – Dheer Apr 22 '13 at 14:26

CrossBrowser transparent text with css

2 Answers2