لطفا منتظر باشید ...
17.4 Transparent Images
One of the most popular tricks
you'll find on almost everyone's
web pages is the transparent image. Transparent images let the
background show through, giving the remainder of the image the
appearance of floating on the page. The effect is clever, and it is
the only way to put nonrectangular images into your document
displays. [Section 5.2.1]
Creating a transparent image is easy, once you understand how the
process works and which images are candidates for transparency.
17.4.1 Colors, Maps, and Indexes
Images represent
their colors in one of two ways: directly or through a colormap.
In the direct method, each pixel in the
image contains the actual RGB values that define the color of that
pixel. Such images are often called true-color
images, since the number of distinct colors in the image is generally
quite large. It is often the case that very few pixels in a
true-color image share the same color, with many pixels having subtly
different variations of the same color. The most popular image format
using this representation method is JPEG.
Colormap-based images keep all the different colors used in the image
in a table known as the colormap. Each pixel in the image contains an
index into the table of that pixel's color. In
general, the table is fairly small (usually less than 256 colors).
This means that many pixels share the same color and that whole
groups of pixels can have their color changed by simply altering the
appropriate entry in the colormap. The most common image format using
colormaps is GIF.
Image
transparency is possible only with images containing a colormap and
is currently defined only for images using the GIF89a format. In this
format, one entry in the colormap is tagged as the transparent color.
All pixels containing the index of that entry are made transparent
when the image is displayed.
For example, consider an image containing eight colors. The colormap
is eight entries long, with indexes numbered 0 through 7. Each pixel
in the image contains a value from 0 to 7, corresponding to its color
in the colormap. If you indicate that the second entry in the color
map, whose index is 1, is transparent, all pixels with the value 1
are made transparent when the image is rendered.
17.4.2 Creating a Potentially Transparent Image
The cookbook way
to create a transparent image is easy: take a conventional image,
determine the color to be made transparent, and convert the image to
GIF89a format, marking that color as transparent.
The most difficult part for most people is finding a conventional
image that is suitable for conversion. To make the background of an
image transparent, the entire background must be
one color. Unfortunately, many images do not meet this simple
criterion. Scanned images, for example, usually have backgrounds that
are a mix of several slightly different shades of one color. Since
only one color can be made transparent, the result is a mottled
background, part transparent and part opaque.
Many
image-editing tools use a process known as
dithering to create certain colors in an image.
Dithered colors are not pure but are a mix of several other colors.
This mixture is not amenable to transparency. You'll
often find dithering used on systems with small colormaps, like
conventional 16-color VGA displays on some PCs.
Finally, some images have a pure background color, but that color is
also used in parts of the image you want to keep opaque. Since every
pixel having the appropriate colormap index is made transparent,
these portions of the image become transparent as well.
In all cases, the problem can be solved by loading the image into an
image editor, turning off dithering, and painting the background
areas, usually by hand, to be a single color not used anywhere else
in the image. Make sure you save the result as a GIF image, so that
the colormap and pixel indexes are retained.
17.4.3 Converting the Image
Once you
have an acceptable image and you've determined the
color you want to make transparent, you'll need to
convert the image to GIF89a format.
Several commercial products let you create transparent and interlaced
GIF images, including Adobe PhotoShop and PaintShop Pro. Of course,
these applications can do far more than simply convert transparent
images, and they make great additions to the web
author's toolkit.
