Filter/opacity question?

HTML & CSS
1

im trying to make 3 seperate overlapping divs with a filter bg
the first div is to be a containing div opacity 30
the second div w/in the first div bg opacity 30
then overlapping the second div with 100 percent visible content
b and c need to be the same size
im trying to make it so u can still see the body background
i tried using the z-index with no luck

<div id=“a”>
<div id=“b”></div>
<div id=“c”>content</div>
</div>

body{
background-image=“”
}
#a{
background-color:#000;
filter:alpha(opacity=30);
opacity:0.3;
}
#b{
background-color:#000;
filter:alpha(opacity=30);
opacity:0.3;
position:absolute;
z-index:1;
}
#c{
filter:alpha(opacity=100);
opacity:1;
position:absolute;
z-index:2;
}

2

With divs inside other divs that have opacity less than 100% the child will inherit the parent opacity. In your example you didn’t give your divs any width or height, so you couldn’t see the result. Here is an example where the divs are independent of each other, so the opacity can be set as required. You will need to adjust the positioning to achieve your other objectives.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Opacity of overlapping divs</title>
<script type=“text/javascript”>
<!–

//–>
</script>
<style type=“text/css”>
<!–
body {
font-family:arial, helvetica, sans-serif;
font-weight:bold;
font-size:13px;
color:#000; text-align:center;
margin:3px 0px;
}

#wrap {
position:relative;
top:0px;
left:0px;
width:900px;
height:500px;
margin:0px auto;
text-align:left;
}

#a{
position:relative;
top:0px;
left:0px;
z-index:1;
width:400px;
height:400px;
background-color:#0FF;
filter:alpha(opacity=30);
opacity:0.3;
border:1px solid #000;
}

#b{
position:absolute;
top:25px;
left:5px;
z-index:2;
width:200px;
height:300px;
background-color:#F00;
filter:alpha(opacity=50);
opacity:0.5;
}

#c{
position:absolute;
top:50px;
left:30px;
width:100px;
height:100px;
background-color:#FFF;
filter:alpha(opacity=100);
opacity:1;
z-index:3;
}

–>
</style>
</head>

<body>

<div id=“wrap”>
<div id=“a”>
Opacity 30%
</div>
<!-- end a –>
<div id=“b”>
Opacity 50%
</div>
<div id=“c”>
Opacity 100%
</div>
</div>
<!-- end wrap –>

</body>

</html>

3

Hi,

If you want non transparent elements on top of transparent ones then its quite awkward to do (without using css3 rgba) because as mentioned above any elements inside a div that has opacity applied will be affected by that opacity and it cannot be reversed.

We had a quiz here that shows how it can be done but is a little complicated. Here’s a [URL=“http://www.pmob.co.uk/temp/quiz20-opacity2.htm”]live example. The basis is that the transparency is applied via a separate div that holds no content and is then overlaid where required so that children are not affected.

I need to see exactly what you wanted to provide a closer example.