Browser preferences. If a visitor changes the settings in his browser to overwrite the colours you choose for your document, then the anticipated
effect will not work.
Webmaster
Design : Transparent Images
[ Contents ]
Lynda Weinman
Imitating Transparency
Of the two most popular graphic formats used on the Web, only GIF supports a transparency function. This is why, in order to produce images with irregular outlines, you have to create GIFs or imitate their transparency.
Figure 1: With and without transparency: the difference is obvious!
For a number of situations, imitating transparency is the easiest method to use. Let's suppose you want to convey the sensation that a certain shape is floating on the screen. All you need to do is to apply to your image the same background colour as that of your page. With this technique, the rectangle containing the image will not be visible.
Figure 2: The image merges into the page. No border can be seen.
There are two ways of implementing this kind of transparency: through the <BODY BACKGROUND...> tag and attribute pair or the <BODY BGCOLOR...> pair:
- The BACKGROUND attribute requires the creation of another small graphic of the same colour as that of your shape's background (our file is
called fondbleu.gif). The code used in your page boils down to this:
<BODY BACKGROUND="fondbleu.gif">
- To use the BGCOLOR attribute, you only have to select the colour you want to use as the background for your shape, find its hexadecimal code,
and then add the following HTML code snippet to your page:
<BODY BGCOLOR="#6699FF">
<CENTER>
<IMG SRC="cercle.gif">
</CENTER>
</BODY>
<CENTER>
<IMG SRC="cercle.gif">
</CENTER>
</BODY>
Browser preferences. If a visitor changes the settings in his browser to overwrite the colours you choose for your document, then the anticipated
effect will not work.
This method works provided your background is a plain colour. But if you insert a tiled pattern behind your image, the effect will be destroyed.
Figure 3: The effect is not successful with a tiled background
Even if you apply the same pattern to the background of your shape, it will not be aligned with the tiled background of your document. The reason is that the foreground alignment is different from the background one. So the simplest solution is to use real transparency instead of imitating it.