The Transparency Attribute

DEFINITION: As applied to tabling, the transparency attribute allows us to overlay two or more colors on top of each other, or one or more colors on top of an image, and allowing a certain percentage of the lower colors or image to show through the top color.

EXAMPLE: In the title table above, the table bgcolor is blue. The bgcolor of all of the cells is white! The shading is accomplished by use of the transparency attribute, which is expressed as a percentage. The extreme left cell has no transparency. The one to its right has a transparency of 10%. With each cell, the percent increases, until in the last cell on the right, the transparency is 100%. These changes allow less white and more blue to show through, until in the last cell, the white of the cell bgcolor is effectively eliminated. Below is the code for the first two cells:

ADDITIONAL EXAMPLES:

Use "Back" key to return to this table
Cell Bgcolor	JPG Bgs	Non-Ani Gifs
Gif + Transp Gif	Blinking Image	Transp Text
Webpage Examples

TABLE BGCOLOR PLUS CELL BGCOLOR TRANSPARENCY

A tabled full-strength rainbow

"#FF00FF"

"#0000FF"

"#00FF00"

"#FFFF00"

"#FF6600"

"#FF0000"

Below is the same tabled rainbow. Table bgcolor=white. Each cell's transparency=75%. This use of transparency is the same as in the title table:

"#FF00FF"

"#0000FF"

"#00FF00"

"#FFFF00"

"#FF6600"

"#FF0000"

Table bgcolor=black. Each cell's transparency=50%.

"#FF00FF"

"#0000FF"

"#00FF00"

"#FFFF00"

"#FF6600"

"#FF0000"

Here are the codes for the pastel rainbow:

Note that the yellow cell ("#ffff00") has no gradcolor or angle. This was necessary to give the yellow enough width so it would look equal to the rest of the colors.

IMAGE AS BACKGROUND - JPGs

Transparency works in table and cell background colors, but not with images used as table and cell backgrounds. Also, the transparency attribute does not work for certain jpgs, so you must use them as the background, then specify the bgcolor and use the transparency with this.

The same jpeg image is used for the background in all four cells. The upper left cell has no bgcolor and no transparency. The other cells have a white bgcolor plus transparency.

Upper right: transparency=15%
Lower left: transparency=30%
Lower right: transparency=60%

If the bgcolor is the only attribute and the jpg is inserted into the cell via the <img src="imageURL.jpg"> then the transparency attribute will have no effect at all. Remember, if the transparency attribute does not work with your chosen jpg, then codes similar to those below are what you must use. This table has 2 rows with 2 cells in each row. Below are the codes for the images:

However, many jpgs will accept the transparency attribute.

IMAGE AS BACKGROUND - NON-ANIMATED GIFs

This technique is for non-animated gifs. In each of the tables above, a gif was used as the background. The cells on the left have no transparency; the ones on the right have a 50% transparency for the candles and an 80% for the roses. The code for making transparent gif backgrounds is as follows:

You can also use the gif as a table background. As you can see, gifs with a black background color do not always make especially successful transparencies. So try to find gifs with white, light colored or transparent backgrounds. You can also combine a bgcolor with a transparency plus the gif background with a transparency for special effects. Just experiment and see what happens.

NOTE: Although this technique will work for many gifs, there are a few that will not fade. If you find one of these, then use the type of code that I used above for jpgs that won't fade.

If you use a GIF with a portion transparent over a table bgcolor transparency, the GIF transparency doesn't work, according to Net4TV.

Also, if a gif will not transparentize, then try changing its size, just by one pixel.

GIF PLUS TRANSPARENT GIF

Below are two gifs as they appear separately: three ghosts and a skeleton, and a graveyard. Below them is the combined image of the graveyard used as the table background with the ghost gif set at 60% transparency. To make the transparency attribute work in this case, the ghost gif must be used in the <img src> tag. This will not work if the ghost gif is used as the <td> background.

BLINKING EFFECT WITH IMAGES

Ray (Scopehound) discovered this effect when using transparency. My example is immediately below. Look under "Examples of Transparency in Use" below for Ray's page. Here's his explanation. "You start out with a non-animated background image. Now you take an animated gif and make it the exact height and width of the background image. So you put the table together like this:"

In the example above, the owl is a jpg; the "snow" is an animated gif. Putting the transparency attribute in with the animated gif makes the background image seem to blink. This is because animated gifs consist of images with alternating black and transparent or white backgrounds. The owl shows up only when the transparent background phase of the animated gif is onscreen.

MAKING TEXT TRANSPARENT

Although this page concerns itself with how the transparency attribute behaves in a tabled form, it is possible to transparentize text, too. You use the <font> tag and just add in the percent of transparency you desire. In the example below, the T and Y have no transparency; the others shade from 10% to 50% and back again in 10% increments:

T R A N S P A R E N C Y

Other uses for the transparency attribute, similar to the jpg and gif examples above, quoted from a Net4TV tute: "Use transparency to pull down image colors that are too bright (made for computers) so that they look great on WebTV by setting transparency=20. There are some transparency "bugs" in the values around 30 that can turn into strange colors. If this happens to you, just make the value higher or lower until you get the color you want." [The url I had for this tute is no longer valid.]

However, I did play around with mixing transparent colors. So for this example, go to Mixing Colors Using Transparency.

EXAMPLES OF TRANSPARENCY IN USE

On this "Submarine" page, I have used four transparent layers of blue with the gifs sandwiched in between them to give the illusion of distance underwater. I had to stick to non-amimated gifs for this page, because animated gifs appeared to pop right to the surface layer, no matter which layer I tried to use them on. This page uses CSS to position and layer the various elements.

Ray (Scopehound) has used a transparency on this page. See his explanation above under "Blinking Effect with Images" above.

Fred's Textured Grad Backgrounds tutorial shows you how to use transparency to obtain textured background effects.

Visit these other Tutorials by Flo

Thursday 21st of August 2008 10:06:40 PM

Copyright� by Tone By Tone Dot Net
Tandem Tooters

Arbor Hosting