Preserving transparency

I find it really frustrating trying to get all the browsers to display transparent things properly. And even now I have trouble getting it to work the way I want it to. As usual, IE6 is the one that doesn’t want to cooperate.

There are two ways to displaying transparencies.

1. For an image, make a PNG, I use PNG-24, using Adobe Photoshop (don’t forget to check the “Transparency” check-box). I’m sure you could use other image editors such as GIMP, but I haven’t tested it yet. If you’re going to do it this way, you’ll need to do this to get it to work with IE6.

2. For just a div with a background color, use the opacity property in CSS.

CSS:

<style type="text/css">
.opacity
{
    background:#666;
    width:100px;
    height:50px;
    border:1px solid #000;
    opacity:0.6;
    -moz-opacity:0.6;
    filter: alpha(opacity=60);
}
</style>

opacity
This is for Mozilla, Safari, etc. Values for this range from 0 to 1.

-moz-opacity
This was for versions of Mozilla before and including 1.7. I like to include it anyway.

filter: alpha()
This is for IE6. Values for this range from 0 to 100.

Just add the following HTML wherever you need it:

    <div class="opacity"></div>

The end result (I just placed the “opacity” div over a colored div and some text so that you can see how it should act):

If you do it this way, you must know that IE comes in and kills it once again; but this time, it’s IE7 that gives us problems. IE7 doesn’t support any of the mentioned opacity properties, and anything with these properties won’t appear at all. However, IE7 DOES support PNG transparency! So to fix this, simply create a PNG of the same color as “box2″ div, we’ll call it “box2.png”.

Add this:

So to make it so that only IE7 uses box2.jpg, you just need to add this to the previous stylesheet:

.opacityIE7
{
    background:
        url(http://www.csswoes.com/wp-content/uploaded/images/transparency.png)
            0 0 repeat;
}

Now the HTML should look something like this:

    <div class="opacity"></div>
    <!--[if IE 7]>
    <div class="opacityIE7"></div>
    <![endif]-->

I don’t usually use this conditional for HTML, instead I use php in order to determine the browser and browser version.

If all goes well, this should look transparent in IE7: