O'Reilly logo

Web Design in a Nutshell by Jennifer Niederst

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Transparency

The GIF89a format introduced the ability to make portions of graphics transparent. Whatever is behind the transparent area (most likely the background color or pattern) will show through. With transparency, graphics can be shapes other than rectangles!

To understand how transparency works, you need to start with the color table (the table that contains the palette) for the indexed color image. In transparent GIFs, one position in the color table is designated as “transparent,” and whatever pixel color fills that position is known as the Transparency Index Color (usually gray by default). All pixels in the image that are painted that color will be transparent when viewed in a browser.

In most graphics tools, the transparent area is specified by selecting a specific pixel color in the image with a pointer or eyedropper tool (in Paint Shop Pro, it needs to be specified numerically). All pixels in the image that are the selected colors (corresponding to the same position in the color table) will be replaced with the Transparency Index Color and therefore transparent when they are rendered in a browser.

Let’s look at three techniques for working with transparent GIFs. Most of these techniques use Adobe Photoshop for its layering features. The first provides strategies for getting rid of “halos” (or fringe) around transparent graphics. The next gives pointers for preventing unwanted transparency within your image. Finally, there is a demonstration of how transparency can ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required