Pregunta
¿Cómo hacer una capa semitransparente con CSS?
Responder esta pregunta por dudin el 2009-05-21
Necesito colocar una capa (div HTML) semitransparente (opacidad de 50% aproximadamente) sobre una zona de la página mientras que se ejecute una acción en otra zona de la página para evitar que el usuario interactúe en esa zona, una vez que termine de completar los datos de la primera zona de la interfaz, eliminaría la capa.
Respuestas
0%
0%
Como consejo digo coloques la capa al final del documento HTML para evitar problemas con el z-index en Internet Explorer, por otro lado debes posicionarla de manera absoluta, preferentemente relativo a la zona que se desea tapar, tal como sigue:
Mientras que el CSS sería:
<div id="zona">
<p>Código HTML a tapar mediante la capa...</p>
<div id="capa"></div>
</div>
Mientras que el CSS sería:
#zona {
position: relative;
width: 100px; /* Las dimenciones son de ejemplo */
height: 100px;
z-index: 1;
}
#capa {
position: absolute;
left: 0;
top: 0;
background-color: #ffffff;
width: 100px; /* Las dimenciones de la capa dependen de la zona */
height: 100px;
z-index: 100;
filter: Alpha(Opacity=50);
-moz-opacity: 0.5;
}
/* Para Internet Explorer */
* html #capa
{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
por maikel el 2009-05-29
0%
0%
Faltó la propiedad opacity para que funcione el navegador Chrome
#capa {
opacity: 0.5;
}
por Anónimo el 2009-06-15
0%
0%
Detallando un poco más cada uno de los atributos:
- opacity: 0.5; En realidad es el más importante porque es el estándar en CSS. Este trabaja en la mayoría de las versiones de Firefox, Safari y Opera.
- filter:alpha(opacity=50); Se necesita para IE
- moz-opacity:0.5; Una forma antigua para Firefox
- -khtml-opacity: 0.5; Un método para el antiguo Safari (1.x)
- filter: progid: http://DXImageTransform.Microsoft.Alpha (opacity=50); Para Internet Explorer 6
- opacity: 0.5; En realidad es el más importante porque es el estándar en CSS. Este trabaja en la mayoría de las versiones de Firefox, Safari y Opera.
- filter:alpha(opacity=50); Se necesita para IE
- moz-opacity:0.5; Una forma antigua para Firefox
- -khtml-opacity: 0.5; Un método para el antiguo Safari (1.x)
- filter: progid: http://DXImageTransform.Microsoft.Alpha (opacity=50); Para Internet Explorer 6
por Anónimo el 2009-06-15
Compartir: 
