December 6, 2012 DPR

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:

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:

margin: -243px 0 0;
z-index: 2000;
padding: 0 32px 0 0;
position: relative;

Again, take a look at “Latest Articles” on . 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…

, , , , ,


Intrigued, excited, and enamored by technology and life. 30 plus years providing businesses with marketing, design, and strategies for success. Specializing in WordPress, Magento, and SEO.

Leave a Reply

Creative design from the North

Call at (845) 247-0909 !
Or, email at [email protected]