Geek Answers Handbook

Transparent background on div

Why does the internal DIV also become transparent when I use this code?
My plan was to make the text visible and transparent. Should I float the inner div over the transparent div?

Here you can see the demo: http://jsfiddle.net/pBAf5/

HTML

<div class="openinghours floatRight"> <div class="content">My test goes here</div> </div>

CSS

 .openinghours { height: 70px; width: 300px; padding: 10px; font-size: 0.85em; background-color: #f6f6f6; border: solid 1px #c7c7c7; margin-right: 20px; margin-top: 5px; opacity: .5; filter: alpha(opacity=50); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
+4
source share
2 answers

Use rgba or transparent png or move the inner text into a child div node of opacity.

0
source

The opacity attribute will affect not only the parent div, but also the child divs. To achieve the desired effect, you need to use a transparent background in the parent div. This can be done using RGBA for the background color of the parent div (not a fully cross browser) or using transparent PNG as the background image of the parent div.

0
source

More articles:


All Articles