Saturday, January 17, 2009

Transparent Background with Full Opacity Text

I recently came across this problem creating one of my newest websites. With the advent of CSS3, (so awesome, I only wish all the browsers supported these features easily) one can create transparent divs quite easily. The following is the code for all browser compatibility for 70% opacity:

filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
zoom: 1.0; /* IE Hack for CSS (IE6 must have layout */
}

But using this code for a background, anything within that div will also have that opacity, including your text. The best way to combat this is to create another div within the div with the background opacity with the following code:

filter:alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
zoom: 1.0; /* IE Hack for CSS (IE6 must have layout */
}

Problem solved! Your welcome.

No comments: