Foros del Web » Creando para Internet » CSS »

Transparencias

Estas en el tema de Transparencias en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/09/2010, 09:06
 
Fecha de Ingreso: octubre-2003
Ubicación: FMSite
Mensajes: 336
Antigüedad: 14 años, 1 mes
Puntos: 2
Transparencias

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!
__________________
http://www.fmsite.net/
  #2 (permalink)  
Antiguo 19/09/2010, 11:36
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: Transparencias

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
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 10/10/2010, 09:50
 
Fecha de Ingreso: octubre-2003
Ubicación: FMSite
Mensajes: 336
Antigüedad: 14 años, 1 mes
Puntos: 2
Respuesta: Transparencias

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.
__________________
http://www.fmsite.net/
  #4 (permalink)  
Antiguo 10/10/2010, 11:39
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 9 años
Puntos: 66
Respuesta: Transparencias

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/
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D

Etiquetas: Ninguno
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 16:50.