Opaque text on transparent background

This tip was based on Mandarin’s Opacity Background: Fully Opaque Text .  This CSS Trick example consists of essentially:

Two (2) separate DIVs or other CSS rules (I used DIVS with id specified)

1. The bottom rule (DIV#latest) is given a POSITION:RELATIVE property so that it knows its relation to the other page elements.
2. Specify the width and height of the DIV layer (DIV#latest) which contains the transparent background which lays underneath the DIV layer (DIV#latestlist) that contains the opaque text. This is necessary, especially in IE7.
3. DIV#latest is given these properties:

DIV#latest
{
background-color: #FDF6C4;
padding: 15px 20px 10px 0;
margin: 3px 10px -15px 0;
border-top: 6px solid #897E32;
border-bottom: 1px solid #3F3700;
opacity: .50;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
height: 234px;
width: 515px;
}

and DIV#latestlist:

DIV#latestlist
{
margin: -243px 0 0;
z-index: 2000;
padding: 0 32px 0 0;
position: relative;
}

Again, take a look at “Latest Articles” on WhatsTheBigIdea.com . Spy the code and I hope it helps someone!

You might ask, “Why do I need transparent backgrounds anyway?” or “Why in god’s name do I need to know this?”. Well, I can give you an answer to the first question. More to come…

alpha, cascading style sheet, css tip, opaque text, Spy, transparent background