CSS: Partial Transparency and Transparency Inheritance

03.03.2009

NOTE: Web design student, Darren Divecha, wrote this article after researching the topic independently outside of class.  If you have any questions, please contact him at .(JavaScript must be enabled to view this email address).

Here is a working example of what this tutorial will show you how to do.

If you are viewing this page in any popular web browser other than MSIE you can see that some parts of this page are transparent. CSS supports partial transparency, though it is somewhat complicated.
In this tutorial we will be looking at transparency in two ways: a percent (0%-100%) and a decimal value (0.0-1.0). To convert from decimal to percent, just multiply by 100.
The code for this is pretty simple, but there are three properties you must include. I will briefly explain each. The three properties are:

-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;


WARNING: this CSS will NOT validate.

So let’s break it down. First of all, ”-moz-opacity:0.50;” sets the transparency of the element in certain versions of Mozilla and other browsers built using the Gecko layout engine. The 0.5 means 50% opaque. If you changed it to 1.0 (100%) the element would become solid.

The line “filter:alpha(opacity=50);” is supposed to set the transparency of the element in Internet Explorer on Windows, but so far this has worked in every web browser I have tried except IE. This is set using percents, so “50” = 50 percent.

Lastly, the line “opacity:0.50;” works in almost every other web browser. This line is similar to the -moz-opacity. It works in most of the latest browsers such as Safari, Chrome, Opera, Firefox, and any other browsers that use the same layout engines as these.

Unfortunately, there are some very annoying problems with this.

When you set the opacity of the parent container, all the children of that parent container also become transparent. If we try setting the opacity of the child container, we see that it cannot be more opaque than the parent element. When you set the child to 100% opaque, it is 100% with respect to however transparent the parent is.

However, there will be times when we will want the child to be more opaque than the parent (e.g. on this site, where the background image is more opaque than the main-content divisions).
There isn’t an easy fix for this. Let’s examine the following code.

<div id="main">
  <div class="post">
text text text text text
  </div>
</div>


Let’s say we want the background of the div with id “main” to be white. We can do that. Let’s say we want the background of the div with class “post” to be blue. We can do that. Let’s say we want to make post transparent and main not transparent. We can even do that (you would “see through” post and look at main). Now let’s say we want to make main transparent and post not. We can do this but it’s difficult.

Lets add some style to to our html

#main
{ -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;
} div.post
{ -moz-opacity:1; filter:alpha(opacity=100); opacity:1;
}

What does this CSS do? It makes the main 50% transparent and post 100% opaque. That was the effect we wanted right? Well not quite. Post is a child of main so for it 100% really means 100% of mains opacity…or in other words it’s also 50% transparent.

So how do we fix it? Well it’s not easy. We need to add an empty div (or span) container under main and give it some special CSS.

The html needs to be changed to this:

<div id="main">
  <div class="post>
  text text text text text
  </div>
  <div class="ft></div>
</div>


The new CSS is:

#main
{ position:relative;/*position of the transparent container must be relative*/
} /*div.post
{ -moz-opacity:.7; filter:alpha(opacity=70); opacity:.7;
I commented this out because I am not sure if this will work.
Without it the post simply becomes opaque.
}*/

.ft
{ background:#B0B3BA;/*ft's background color.
This is also what color the transparency will be*/
position:absolute;/*needs to be absolute*/
top:0;/*Spreads this class across its container(main in this case)*/
left:0;
right:0;
bottom:0;
z-index:-1;/*position on the stack. pushes ft behind the other children*/
opacity:.70;/*transparency of ft*/
}

While this fix works, it goes against the idea that we should separate content from style. You will need to decide which is more important to you: transparency or web standards.
A quick quote form Mr.Gordon explaining how this works:

If you set a container to absolute and set the top, bottom, right, and left values to 0 it will stretch the content to all edges of the container.

This trick works because we are not actually giving the main container a transparency. The main container has no background: you see straight through it. What we are really doing is giving ft a background and transparency, putting it behind the other children, and stretching it across main. This way it LOOKS like main is transparent but it really isn’t. (Thanks for this explanation Mr. Gordon.)

This effect creates some problems and you will just have to be ready for them. If you run into issues try commenting out some of your CSS (NEVER DELETE) to trouble shoot. Most of all have patience. Make sure that your basic design looks good so that if transparency doesn’t work (either because a browser doesn’t support it or you can’t make it work with your CSS) your site will still look good.

Once you have a good looking basic site you need to decide some things. Will the background change when you hover over an element? Will you change the element’s transparency? Which elements will be transparent? Which elements should be shown on top? Good design is everything!

Thanks go out to my web development teacher Zac Gordon and this example by Hedger Wang for helping me create this article.

Comments

• 
• 
•