Translucency Example

Technique 1: The Translucent PNG Background

You should notice that this area of the page has a darker background: the coloured patterns are less pronouced, and the text is easier to read.

This is all thanks to a translucent/semi-opaque black background behind this area. This is very easy to do with the PNG graphics format, because it supports alpha channels.

The CSS used to create this effect is:

#t1 {
	background: transparent url("semiopaque.png")
		    repeat scroll top left;
}

However, the effect has a downside in that Internet Explorer doesn't support alpha blending, so the effect will only work in Gecko, Opera and KHTML. So we move on to technique 2...

Technique 2: The Pseudo-Translucent GIF Background

This is a similar technique, but with a GIF file instead of PNG. "What," I hear you ask, "but I thought GIF could only handle binary transparency?" Yes, that's right. With GIF, a pixel is either transparent or opaque — there is no in between. However, if I do a chess-board effect of black, transparent, black, transparent, etc, from a distance the result will look like a translucent black image.

If you get your head real close to the monitor, you should notice that the translucent background looks a bit fuzzy, but it's barely noticeable really.

How is this done? Almost identically to technique 1:

#t1 {
	background: transparent url("semiopaque.gif")
		    repeat scroll top left;
}

This technique works not just in Gecko, Opera and KHTML but in Internet Explorer 5.x+. However, it is a little fuzzy...

Technique 3: Combining the Previous Two

Quite an easy concept: show the GIF file to Internet Explorer, but the PNG file to other browsers. This can be done in many different ways, such as serverside scripts, but here's one easy method:

  1. Replace the <body> tag in your HTML with <body id="body">
  2. Use this CSS:
  3. #t3 {
    	background: transparent url("semiopaque.gif")
    		    repeat scroll top left;
    }
    body[id=body] #t3 {
    	background: transparent url("semiopaque.png")
    		    repeat scroll top left;
    }

How does this work? Well, all browsers can understand the first rule, so are instructed to use the GIF file. We then give an instruction to use the PNG instead, but we phrase it in a way that Internet Explorer can't understand. There we go. Now who said translucency was hard?