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");
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