Cross browser CSS transparency

Author: Shaunk...

Here is how you go about setting transparency with CSS so it works cross-browser.

It can be an effective way to reduce file sizes however the downside is that the transparency is inherited so if it is applied to a <div> tag then all the child nodes also inherit the transparency. This can be overcome by assigning new transparency values.

Sometimes however it is still going to be quicker and easier to use a semi-transparent png as the bg image.


.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

More Info

 

0 Response to “Cross browser CSS transparency”

Leave a Reply