O'Reilly logo

Web Design in a Nutshell, 2nd Edition by Jennifer Niederst Robbins

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 of the page) will show through. With transparency, graphics can be shapes other than rectangles (Figure 19-3)!

The same GIF image with transparency (left) and without (right)

Figure 19-3. The same GIF image with transparency (left) and without (right)

In most graphics tools, the transparent area is specified by selecting a specific pixel color in the image with a special transparency pointer or eyedropper tool (in Paint Shop Pro, it needs to be specified numerically). All pixels in the image that match the selected color will be transparent when they are rendered in a browser.

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 with that color will be transparent when viewed in a browser.

Let’s look at techniques for working with transparent GIFs. 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 ...

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