div translucido sobre imagen

[moron]

hola a todos.

estoy tratando de emular el div transparente que hay sobre la imagen del banner de esta página http://www.freewebsitetemplates.com/...enwalkthrough/
trato de entender el css pero no hay caso. (estoy medio oxidado con el tema css)
y como hace para que la capa quede sobre la imagen y no debajo.

podrian por favor guiarme al respecto?

muchas gracias

[hackjose]

Puedes hacer un div transparente con background-color: transparent; o con opacity:0;

Para que este encima y no debajo debe usar z-index;

por ejemplo

banner
{
z-index:0;
}

divtransparente
{
z-index:1;
}

El valor mas grande de z-index queda por encima

Otra cosa a tener en cuenta es que z-index aplica a elementos posicionados osea elementos fixed relative y absolute

salu2

[moron]

gracias por la respuesta. No logro ponerlo sobre el banner (para que quede en la parte inferior de la imagen). queda debajo del div banner, a continuación del mismo.

tengo esto:

css:

#banner
{
z-index:0;

}

#transparente
{
z-index:1;
width:100%;
height:180px;
background-color:#000;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60);
}


html:


<div id="wrapper">

<header>
<img src="logos/logo.png" height="100%" width="50%"/>

</header>

<div id="menu">
<a href="./">Inicio</a>
<a href="./">Servicios</a>
<a href="./">Contacto</a>

</div>
<div id="banner"><img src="images/banner1.png" width="100%" /></div>
<div id="transparente">hola</div>


gracias desde ya.

[pzin]

z-index no funciona en elementos cuya posición sea estática, que es la posición por defecto de todos los elementos. Así que tienes que ponerle una posición relativa, absoluta o fija.