Transparencias

[Black_River]

Hola gente!

Bien, estoy haciendo un sistema para ver imágenes. Tengo una lista de imágenes, y al clicar, se muestra un div que cubre casi toda la pantalla con la imagen a mostrar.

Quiero hacer que ese div tenga algo de transparencia pero su contenido no. O sea, que detrás del div se vea parcialmente el contenido de la página, pero que la imagen tenga opacidad 100%, al igual que un pequeño texto que muestro para cerrar el div.

Hay forma de hacer que el div tenga una opacity de 80% pero que la imagen se vea 100%?

Muchas gracias!

[maycolalvarez]

una forma es que la imagen no este anidada dentro del div transparente, debido a que hereda su transparencia, puedes usar position absolute, fixed o relative

[Black_River]

Hola,

Finalmente, opté por dejarlo con opacidad. Pero hoy he vuelto a entrar en la pelea y quiero conseguir tal efecto.

Tengo un div medio-transparente (al 70%) con position fixed cubriendo toda la pantalla y, dentro, coloqué otro div probando con las configuraciones que propones. Sin embargo, siempre se ve parcialmente transparente.

Este es el CSS que uso:

Código:

#bloqueImagen{
	position:fixed;
	left: 0;
	top: 0;
	width:100%;/*900px;*/
	height:100%;
	padding: 20px;
	display: none;
	color: #FFF;
	font-weight: bold;
	font-size: 18px;
	text-shadow: 0 1px #BBB;
	
	background-color: grey;
	text-align:center;
	z-index:999;
	box-shadow: 0 0 5px #888;
	filter: alpha(opacity=70);
	opacity: 0.7;
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;
}
#bloqueImagen img{
	max-width: 900px;
}
#bloqueImagen .laImagen{
	position: relative;
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-opacity:1;
	-khtml-opacity: 1;
}

bloqueImagen es el div que cubre toda la pantalla y .laImagen es el "contenido" que va dentro de dicho div.

[tredio]

podiras usar

background:rgba(180,55,30,0.8);

teniendo en cuenta que no es algo que va a servir en las versiones viejas de algunos navegadores, tambien podrias poner como fondo del div una imagen transparente.

un link con info de la propiedad. http://www.css3.info/preview/rgba/