Foros del Web » Creando para Internet » CSS »

Enmascaramiento de capas con CSS

Estas en el tema de Enmascaramiento de capas con CSS en el foro de CSS en Foros del Web. 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= ...
  #1 (permalink)  
Antiguo 31/03/2008, 09:54
Avatar de indiestudio  
Fecha de Ingreso: julio-2003
Mensajes: 163
Antigüedad: 14 años, 5 meses
Puntos: 1
Enmascaramiento de capas con CSS

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
  #2 (permalink)  
Antiguo 31/03/2008, 10:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Enmascaramiento de capas con CSS

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.
  #3 (permalink)  
Antiguo 31/03/2008, 11:43
Avatar de indiestudio  
Fecha de Ingreso: julio-2003
Mensajes: 163
Antigüedad: 14 años, 5 meses
Puntos: 1
Re: Enmascaramiento de capas con CSS

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
  #4 (permalink)  
Antiguo 31/03/2008, 12:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Enmascaramiento de capas con CSS

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

Mikel.
  #5 (permalink)  
Antiguo 31/03/2008, 12:11
Avatar de indiestudio  
Fecha de Ingreso: julio-2003
Mensajes: 163
Antigüedad: 14 años, 5 meses
Puntos: 1
Re: Enmascaramiento de capas con CSS

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;

}
  #6 (permalink)  
Antiguo 31/03/2008, 12:12
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Enmascaramiento de capas con CSS

Eso era

Mikel.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:58.