Geek Answers Handbook

Transparent text CrossBrowser with css

I have a div with a background image, inside such a div I have another element that is smaller and has a white background color. Inside this element I have text that I will not be transparent, so we can see the background image of the first div.

Tried to apply color: transparent; but it does not work. Is there a reliable css method to achieve this?

+4
source share
2 answers

You can not. The only way to do something like this is with a “background with crossed out text” - an image that you place on top of the background image.

0
source

In fact, this is only possible with CSS. In your smaller white backgound element, you can use CSS3 with fallback for IE 6-8. For backup you can use transparent PNG.

CSS3 code for white bg will be:

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

I installed the code to view 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);
0
source

More articles:


All Articles