Hi,
I've got a problem. I want a transparant background for the content div. But not all content in it. I can't get this working:
<div class="notTransparant"> <div class="transparant"></div> content </div>
Is there another work around??
views:
34answers:
3
+1
A:
I think I have done this before (although it was ages ago). What you do is have a div with display: relative, then another div within that with display: absolute, left: 0px, top: 0px, width: 100% and height: 100%. Maybe apply z-index: -10 (to put this behind all other content). You then have the content within the top level (relative) div as normal. Give me a few minutes and I will work out the code for ya...
Ok done that - try the following:
.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.opaque {
position: relative;
}
.content {
position: absolute;
left: 10px;
top: 10px;
}
<div class="opaque">
<div class="transparent">
<img src="/Images/header1.png"/>
</div>
<div class="content">
Hello world!
</div>
</div>
Unfortunately I cannot find a way to place a relative element over the transparent div. If anyone finds a way then please paste the code here. By the way there is actually no need to specify any z-indexes.
ClarkeyBoy
2010-10-08 23:41:01
+1
A:
CSS rgba
http://www.css3.info/preview/rgba/ http://www.css3.info/preview/opacity/
Dave
2010-10-08 23:41:03
Does this work in IE 6,7,8??
dododedodonl
2010-10-09 00:04:27
no. For IE7+ you can use a transparent (1x1) PNG as a fallback inside a conditional stylesheet. For IE6, just nevermind about it, unless you are making a site for China or India.
Dave
2010-10-09 00:27:37
A:
I also ran into inheritance problems with transparency a while back, this did the trick for me: http://blog.ninanet.com/2010/04/27/css-transparency-inheritance-hack (demo).
Alec
2010-10-08 23:41:24