Transparent background but not child elements [Archive]

Thinskys

11-21-2007, 04:14 AM

I am trying to set the background of a element to transparent but not the child elements. Here is the code I have:

.nav {
background-color:#000000;
float:left;
filter:alpha(opacity=80);
opacity: 0.8;
-moz-opacity:0.8;
width:230px;
height:230px;
}

.navImage{
width:50px;
height:50px;
}

<div class="nav">
<div class="navImage"<img src="images/atc_logo.gif"></div>
</div>

Any idea if it is possible to make the background transparent but the child elements 100%?

Thanks in advance.

coothead

11-21-2007, 09:54 AM

Hi there Thinskys,

and a warm welcome to these forums. ;)

try it like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
position:relative;
width:230px;
height:230px;
float:left;
}
.nav {
position:absolute;
background-color:#000;
filter:alpha(opacity=80);
opacity: 0.8;
-moz-opacity:0.8;
width:230px;
height:230px;
}
.navImage{
position:absolute;
width:50px;
height:50px;
left:90px;
top:90px;
}
</style>

</head>
<body>

<div id="container">

<div class="nav"></div>
<div class="navImage"><img src="images/atc_logo.gif" alt=""></div>

</div>

</body>
</html>
coothead