CSS: transparency with opaque text

CSS opacity is a relatively new feature that has become a part of CSS3. Currently Webkit, Gecko, and Opera support standard CSS opacity while IE7 supports opacity with a nonstandard CSS filter. The opacity tag is used like this:

#transblock {
opacity: .5;
}

This will give the div with the ID of transblock a transparency of 50%. You can do the same thing in IE7 with a filter. It looks like this:

#transblock {
filter:alpha(opacity=50);
}

Ideally you should use both attributes to get the same opacity in Firefox, Safari, Opera, and IE7. This does not work in old browsers, including IE6. Older versions of Firefox (<0.9)

#transblock {
position: absolute;
top: 0px;
left: 0px;
height: 200px;
width: 200px;
z-index: 0;
opacity: .5;
filter:alpha(opacity=50);
}

#block {
position: absolute;
top: 0px;
left: 0px;
height: 200px;
width: 200px;
z-index: 1;
}

Obviously you can add any other attributes you wish to the div. This becomes more difficult when you have a div with variable height because you need to repeat the div contents within both the transparent div and the opaque div. I find it is easiest if you limit what attributes you assign to the ID of the div and instead create a class with the shared attributes. So if you want a div with a background of 50% white transparency and a foreground of black bold opaque text it will look like this:

#transblock {
z-index: 0;
opacity .5:
filter:alpha(opacity=50);
background-color: white;
}

#block {
z-index: 1;
}

.block {
position: absolute;
top: 0px;
left: 0px
color: black;
text-decoration: bold;
}

Then when you declare these in XHTML you can use:

<div id="transblock" class="block">

and

<div id="block" class="block">

This way you only have to edit the class to change your layout without having to edit two different IDs. You should notice two things. First that this requires absolute positioning and z-index values to place the opaque text over the tranparent background. Second, I am using the same name for an ID that I use for a class. Normally I would say that this can be confusing but in this situation I think it is actually easier to understand and manipulate the code.

The use of a sperate class is only really needed if you have variable height because otherwise you do not need to repeat the code. The separate class makes sure that the attributes between the transparent div and the opaque div are always the same which ensures the size of the div is maintained whenever attributes or contents are changed within the div. The only time you would actually have to edit the IDs is if you wanted to change the opacity level or the color of the background.

One other thing to note is that IE7's opacity filter only works on elements with a specified height and/or width.

CSS: transparency with opaque text

CSS opacity is a relatively new feature that has become a part of CSS3. Currently Webkit, Gecko, and Opera support standard CSS opacity while IE7 supports opacity with a nonstandard CSS filter. The opacity tag is used like this:

#transblock {
opacity: .5;
}

This will give the div with the ID of transblock a transparency of 50%. You can do the same thing in IE7 with a filter. It looks like this:

#transblock {
filter:alpha(opacity=50);
}

Ideally you should use both attributes to get the same opacity in Firefox, Safari, Opera, and IE7. This does not work in old browsers, including IE6. Older versions of Firefox (<0.9)

#transblock {
position: absolute;
top: 0px;
left: 0px;
height: 200px;
width: 200px;
z-index: 0;
opacity: .5;
filter:alpha(opacity=50);
}

#block {
position: absolute;
top: 0px;
left: 0px;
height: 200px;
width: 200px;
z-index: 1;
}

Obviously you can add any other attributes you wish to the div. This becomes more difficult when you have a div with variable height because you need to repeat the div contents within both the transparent div and the opaque div. I find it is easiest if you limit what attributes you assign to the ID of the div and instead create a class with the shared attributes. So if you want a div with a background of 50% white transparency and a foreground of black bold opaque text it will look like this:

#transblock {
z-index: 0;
opacity .5:
filter:alpha(opacity=50);
background-color: white;
}

#block {
z-index: 1;
}

.block {
position: absolute;
top: 0px;
left: 0px
color: black;
text-decoration: bold;
}

Then when you declare these in XHTML you can use:

<div id="transblock" class="block">

and

<div id="block" class="block">

This way you only have to edit the class to change your layout without having to edit two different IDs. You should notice two things. First that this requires absolute positioning and z-index values to place the opaque text over the tranparent background. Second, I am using the same name for an ID that I use for a class. Normally I would say that this can be confusing but in this situation I think it is actually easier to understand and manipulate the code.

The use of a sperate class is only really needed if you have variable height because otherwise you do not need to repeat the code. The separate class makes sure that the attributes between the transparent div and the opaque div are always the same which ensures the size of the div is maintained whenever attributes or contents are changed within the div. The only time you would actually have to edit the IDs is if you wanted to change the opacity level or the color of the background.

One other thing to note is that IE7's opacity filter only works on elements with a specified height and/or width.