Enmascaramiento de capas con CSS

[indiestudio]

Hola

Tengo este código HTML:

Código HTML:

<div class="capa_de_imagen" id="principal"><img src="imgs/foto.gif" width="100" height="66" border="0" /><div class="mascara id="mascara"></div></div> 

Este es el CSS:

Código:

.capa_de_imagen{
    width:200px; 
    height:66px;
}
.mascara{
    background-image:url(imgs/mascara.gif); 
    background-position:right; 
    background-repeat:no-repeat;
    width:200px; 
    height:66px;
}

Lo que quiero es que la capa "mascara" se posicione sobre la la capa "principal", para que tape parte de la imagen que esta contiene. No puedo usar z-index ya que se van a generar muchas con php.

Gracias de antemano

[Mikmoro]

Deberías usar position: absolute; en el selector "mascara" de la css, y jugar con los desplazamientos tp, left, right y bottom para colocarla donde quieras.

El div que la contiene deberá tener posicion absoluta o relativa.

Mikel.

[indiestudio]

He puesto lo siguiente y nada:

.capa_de_imagen{
position:absolute;
top:0px;
left:0px;
width:200px;
height:66px;
}
.mascara{
position:relative;
left: 0px;
top: 0px;
width:200px;
height:66px;
background-image:url(../imgs/mascara.gif);
background-position:right;
background-repeat:no-repeat;

}
las capas están dentro de una celda de una tabla

[Mikmoro]

Es que has hecho lo contrario de lo que te he dicho. Míralo bien

Mikel.

[indiestudio]

Si, es verdad, perdona, llevo toda la tarde dándole vueltas y se me cruza la vista, ya.

Me funcionó poniendo esto:

.capa_de_imagen{
position:relative;
top:0px;
left:0px;
width:200px;
height:66px;
}
.mascara{
position:absolute;
left: 0px;
top: 0px;
width:200px;
height:66px;
background-image:url(../imgs/mascara.gif);
background-position:right;
background-repeat:no-repeat;

}

[Mikmoro]

Eso era

Mikel.