Did you know- 8 Bit PNG transparency is just like an old school transparent Gif

Don’t believe me? Check it out:



There’s nothing fancy going on there at all. Here’s the full document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#png {
background: url(sample-bg.jpg);
height: 200px;
width: 200px;
}
-->
</style>
</head>

<body>
<div id="png">
<p><img src="png-sample.png" alt="PNG Sample text" width="94" height="50" /></p>
<p><img src="png-sample.png" alt="PNG Sample text" width="94" height="50" /></p>
<p><img src="png-sample.png" alt="PNG Sample text" width="94" height="50" /></p>
</div>
</body>
</html>

As you can see, I’m just grabbing the images and dumping them into the doc. This fails in IE4 and Netscape 4.78. It works in everything else Browsercam offers.

This is different than 32 Bit PNG transparency (24 Bit color depth with 8 Bit alpha,) but still a useful thing to know if, like me, you’re transitioning over to PNGs from GIFs for web graphics.