Wednesday, April 11, 2007

Translucent DIVs

This focuses on the background of div being a transparent color because it will be overlapping a background image on the body.

Both background and text will be transparent if you don't use positioning or a transparent png for background image.

Start with high contrast between text and background colors to prevent visability issues. Both background and text will be transparent but it should still look good if your transparency is not too low and you choose colors that have a high contrast.

div.transparentDIV
{
background-color: #000000; /* dark background*/
filter: alpha(opacity=70); /* 70 percent opacity */
-moz-opacity: 0.7;
opacity: 0.7;
}

div.transparentDIV *
{
filter: alpha(opacity=100); /* everything in the div to have an opacity at 100 percent */
-moz-opacity: 1;
opacity: 1;
color: #FFFFFF; /* white text */
}

Resources:
CSS Transparency for Internet Explorer (IE), Mozilla and Safari
Background transparency in CSS

No comments: