Opacity de CSS3

Mariela_Fiad · #1 (**permalink**) 31/10/2010, 15:34

Hola es la primera vez que uso transparencias y funciona en los navegadores que tengo yo por lo menos. Pero el problema es que se hereda la transparencia y aunque pongo el valor menos transparente para que se muestre sólido de todos modos lo hace. Resumiendo la estructura es así.

Código HTML:

<body>

<div id="contenedor">

<p>....</p>

</div>


</body>

Y el CSS

b

Código CSS:

Ver originalody { background: url(../Pictures/piedraazul.png) #E1FFFF; 
       margin:0;
       padding: 0}
 
#contenedor { opacity:.8 ;
                         background: #FFF;
             width: 45&#37;;
             margin:0 auto;
             height: 800px;
             padding: 7% 5% }
 
p {background: #FFF;
     opacity: 1.0;
     }

Los textos deberían verse con un fondo blanco solido, pero no lo hace. Si cambio el color a por ejemplo un rojo cambia pero sigue con la misma transparencia aunque indique lo contrario. También noté que le puedo agregar más transparencia, pero no quitar. Lo único que se me ocurre para que se vea de un color sólido es poner el texto fuera y luego posicionarlo dentro del contenedor, pero no quiero hacer esto.

¿Sucede esto por qué esta técnica aún es nueva o por qué?
¿Cuándo se estima estará lista la nueva CSS3?
Saludos

#2 (**permalink**) 01/11/2010, 02:21

usa colores rgba para css3, y todavia mas compatible, usa imagenes con canales alpha (png)

compatible firefox, opera, safari y chrome

Código CSS:

Ver originalbackground-color: rgba( 255, 255, 255, 0.8);

compatible con el resto menos IE6

Código CSS:

Ver originalbackground-image: url("tu_imagen_con_semitransparencia.png");

Edito (me falto explicacion):

En efecto, lo que pasa con este atributo es que se hereda a todos los hijos, y no puedes revertir el efecto

por ejemplo, si tienes un div con opacidad de 8, y dentro tienes un p con opacidad de 7, su opacidad real seria

10 - ( (10 - 8) + (10 -7) ) = 5

la mejor practica de esto en css3, seria utilizar fondo semitransparente, ya que solo afectara al fondo, no al elemento, esto puede ser con rgba

rgba( rojo, verde, azul, opacida)

pero desafortunadamente esto aun no es 100% compatible, ya que yo sugeriria utilizar imagenes png semitransparentes, ya que el tan famoso y tan odiado ie no soporta rrgba aun, solo hasta le vercion 9