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)
- The bottom rule (DIV#latest) is given a POSITION:RELATIVE property so that it knows its relation to the other page elements.
- 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.
- DIV#latest is given these properties:
padding: 15px 20px 10px 0;
margin: 3px 10px -15px 0;
border-top: 6px solid #897E32;
border-bottom: 1px solid #3F3700;
margin: -243px 0 0;
padding: 0 32px 0 0;
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…