¿Cómo se agregan diferentes opacidades a los elementos anidados?

Tengo dos elementos anidados en HTML y quiero dar a la redacción una opacidad 0.8 y la que está dentro de ella opacidad 1.
Creo que entiendo por qué no funciona, pero, ¿cómo puedo imitar ese efecto?
Aquí hay un HTML simplificado que muestra el problema, quiero que el cuadrado verde sea sólido.¿Cómo se agregan diferentes opacidades a los elementos anidados?

<div style='background-color:red; 
      width: 500px; 
      height: 500px; 
      border: 1px solid black; 
      position: absolute; 
      top:0; 
      left:0; 
      opacity:0.8'> 

    <div style='width:150px; height:150px; background-color:green; opacity:1'> 
     Some content 
    </div> 
</div>

Fuente

2011-03-08 Itay Moav -Malimovka

siempre se puede abrazar a una mejora progresiva y utilizar rgba de sus antecedentes-colores

// this will only affect the div it's applied to and not it's contents 
background-color: rgba(0,0,0,0.8)

Fuente

2011-03-08 20:33:19 stephenmurdoch

ps - dado que esto no funciona en algunos navegadores, se considera una mejora progresiva; puede usar [modernizr] (http://www.modernizr.com/) para ayudar con ese lado de las cosas aunque – stephenmurdoch

Respecto a mi respuesta, notada Lo probé, el mío no funcionó. ¡Gracias por el aporte! –

Si se utiliza la propiedad rgba CSS en lugar de la propiedad de opacidad se puede lograr esto:

<div style='background-color:rgba(0, 255, 0, 0.8) ;width: 500px; height: 500px; border: 1px solid black; position: absolute; top: 0; left: 0'> 
<div style='position: relative; width: 150px; height: 150px; background-color: rgba(0, 0, 255, 1);'>aaaaaaaaa<br>aaaaaaaaa<br></div> 
</div>

Demostración: http://jsfiddle.net/ScHgC/

Fuente

2011-03-08 20:35:54

no funciona en IE :-( –

'rgba' es realmente la manera de efectuar esto, ya que no tiene que meterse con wrapper div's, por supuesto, IE es el problema. –

En ese caso usaría png transparentes en conjunción con DD_belated png fix (en una hoja de estilo condicional para IE) o quizás puede usar CSS3Pie, aunque tiene soporte limitado para rgba http://css3pie.com/documentation/supported-css3-features/#rgba –

Usando CSS2

Jugueteé una demo para usted que ilustra un concepto clave:

http://jsfiddle.net/audetwebdesign/pN69F/

Usted puede comenzar mediante la adición de un div wrapper para posicionar sus dos adjuntos del div, outer y inner. El outer viene antes del inner, lo que significa que el inner se ubicará sobre el outer (a menos que ajuste los valores del índice z).

Puede establecer la opacidad en outer div y eso permitirá que cualquier texto de fondo o imagen sea parcialmente visible. Establezca la opacidad del div inner en 1.0 para obtener una coloración totalmente saturada.

Creo que la mayoría de los navegadores admiten opacidad, pero echa un vistazo a http://www.quirksmode.org/css/opacity.html para ver las propiedades de CSS específicas del fabricante para manejar las peculiaridades de IE.

Fuente

2011-03-08 20:47:45

¿Cómo se agregan diferentes opacidades a los elementos anidados?

Respuesta

Cuestiones relacionadas