PDA

View Full Version : transparent background-color of a div but the text


indianleo
02-07-2010, 12:23 PM
Hello friend I got a div with black background color I want it to be transparent like 40% opacity so the the behind image can be visible but when i try to do this the text inside the div also become transparent and not so visible to read please help me out how should i make only the background-color of a div transparent and not the content inside the div


<div style="color:#fff; width:210px; background-color:#000; filter:alpha(opacity=40);opacity:0.4; margin-top:-250px; height:60px;">
<h2>heading 2</h2>
<h1>heading1</h1>
</div>

domedia
02-07-2010, 03:54 PM
use rgba, a css3 property. It's not going to work in older browsers, but you can think of it as progressive enhancement.

.box {
background: rgba(200, 255, 255, 0.5);
}

http://css-tricks.com/rgba-browser-support/
.

indianleo
02-07-2010, 04:57 PM
but i want it should work in IE6 also and i gues this wont work in IE6

domedia
02-07-2010, 05:26 PM
but i want it should work in IE6 also and i gues this wont work in IE6 Yes, you're right.

gentleone
02-07-2010, 06:04 PM
but i want it should work in IE6 also and i gues this wont work in IE6

I don't understand why you struggle with the various IE6 png fixes. They work (even with transparent background images on a div) unless you did something wrong in the coding or forgot something to upload (e.g. clear.gif).

The only thing that doesn't work with the IE6 png fix is if you have a CSS sprite menu with transparent background images. No one came with a solution for that up until now.

gentleone
02-07-2010, 06:12 PM
Oh... and to answer your post here... you need an extra div for your text not to be transparent as well, but this can be tricky... the following article explains:
http://css-tricks.com/non-transparent-elements-inside-transparent-elements/