Foros del Web » Creando para Internet » CSS »

poner un div opaco encima de uno transparente

Estas en el tema de poner un div opaco encima de uno transparente en el foro de CSS en Foros del Web. Hola, tengo problemas para hacer esto, resulta que supuse que era sencillo, pongo un div con opacy: .3 y dentro de él pongo uno con ...
  #1 (permalink)  
Antiguo 21/10/2010, 22:56
Avatar de nodream  
Fecha de Ingreso: septiembre-2003
Mensajes: 134
Antigüedad: 14 años, 2 meses
Puntos: 2
poner un div opaco encima de uno transparente

Hola, tengo problemas para hacer esto, resulta que supuse que era sencillo, pongo un div con opacy: .3 y dentro de él pongo uno con opacy:1, pero oh sorpresa, todos los divs que esten dentro del transparente, heredan la opacidad del padre, así que no funcionó.

depues busque un poco por google y creo que aqui mismo encontré un link donde decía que debía poner un div transparente y otro div hermano que era el opaco y luego a este último ponerlo encima con position: abolute.

Hasta aquí el problema estaba mas o menos resuelto, pero resulta que el div transparente no crece (en lo alto) de acuerdo al contenido de su hermano opaco.

¿Cómo puedo hacer para que que el div transparente crezca segun el contenido de su hermano opaco?

de antemano gracias

ACTUALIZACIÓN: Ah, no cabe duda que muchas veces nos ahogamos en un vaso de agua, la solución más sencilla es usar un png o gif semi-transparente en la propiedad background-image y listo. Pero aún así, me queda la duda ¿se puede hacer lo que dice mi pregunta inicial?

Última edición por nodream; 21/10/2010 a las 23:09
  #2 (permalink)  
Antiguo 22/10/2010, 05:30
 
Fecha de Ingreso: octubre-2010
Mensajes: 66
Antigüedad: 7 años, 2 meses
Puntos: 7
Respuesta: poner un div opaco encima de uno transparente

En vez de opacity, podrías usar colores con transparencia.

En todos los navegadores modernos usando colores rgba (red green blue alpha)


Código CSS:
Ver original
  1. background-color(rgba(50,50,50,0.5)

En explorer (por supuesto tenía que ser distinto!) la solución es algo más complicada:

Código CSS:
Ver original
  1. background:transparent;
  2. filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#550039e9,endColorstr=#0039e9);
  3. zoom: 1;

donde el orden es: #ALPHARGB

Etiquetas: encima, poner, transparencia
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.