No heredar la opacidad o transparencia con CSS y RGBA

En muchas ocasiones hemos tenido problemas a la hora de hacer un diseño web al trabajar con transparencias, si se aplica el filtro a un elemento padre entonces es heredado por todos sus elementos hijos. La solución habitual que se hacía era ubicar los elementos en posición relativa y posicionar el elemento hijo encima del padre con la propiedad z-index .

Para solucionar este problema CSS3 agregó soporte de color de fondo en RGBA , actualmente siendo soportado por Mozilla FireFox, Google Chrome, Opera , Safari e IE9. Para las anteriores versiones es posible implementar gracias a un Hack con Microsoft-proprietary DXImage gradient filters .

La forma de utilizar es similar al RGB, con la diferencia que en el último parámetro se especifica el porcentaje de Transparencia o Alpha comprendido entre 0.0 y 1.0

div { background: rgba(250,86, 86, 0.5); }

No todos los navegadores soportan RGBA, entonces es recomendado agregar un color similar antes de la propiedad de esta manera:

div { background: rgba(25,169, 255); background: rgba(25,169, 255, 0.5); }

Para agregar soporta a Internet Explorer 6 o versión posterior hay que aplicar el siguiente filtro.

filter:PROGID: DXImageTransform.Microsoft.gradient();

Según la MSDN en la documentación explica que las propiedades startColorstr y endColorstr, permiten el ajuste de ambos canales alfa y de color RGB en formato hexadecimal de la siguiente manera:

startColorstr = #AARRGGBB, endColorstr = #AARRGGBB

Donde AA es el valor hexadecimal canal alfa, RR es el valor hexadecimal de color rojo, GG es el valor hexadecimal de color verde, y BB es el valor hexadecimal de color azul. El valor alfa controla la opacidad del objeto. Un valor del 00 es transparente, mientras que un valor de FF es opaco.

Si queremos dar una transparencia del 50% entonces AA en hexadecimal será 80 aproximadamente, finalmente quedaría así:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#8019A9FF,endColorstr=#8019A9FF);

Opcionalmente para no ensuciar nuestra hoja de estilos con hacks, es recomendado poner el código en su documento HTML dentro de un condicional para el caso sea el navegador de Microsoft.

<!--[if IE]>
<style type="text/css">
    .padre{
	background:none;
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#8019A9FF', EndColorStr='#8019A9FF');
	} 

</style>
<![endif]-->

Veamos como hacer un ejemplo sencillo:

<!DOCTYPE html>
<html dir="ltr" lang="es-ES">
<head>
<meta charset="UTF-8" />
<title>Evitar Herencia Opacity con CSS gracias a RGBA</title>
<style type="text/css">
body
{
	font:  12px Arial, Sans-serif;
	color: #666;
}

a:active{
color: #fff;
}

a:visited{
color: #fff;
}

/*Div Principal*/
#main{
width: 600px;
margin: auto;
background: #420300;
padding: 20px;
}
/*Div El cual tendrá la Transparencia*/
.padre{
padding: 20px;
width: 400px;
height: 200px;
border: 2px solid #318dff;
position: relative; /*Para mostra sobre el Texto*/
top: -80px;
left: 20px;
background: none;
/*Hack Par Internet Explorer*/
background: none;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); /* AA, RR, GG, BB */
/*CSS3*/
background:rgba(0,0,0,0.5); /*0.5 De Transparencia*/
}
/*Este el el div hijo tendrá cualquier color de fondo*/
.hijo{
background: #fff;
text-align: center;
padding:20px;
width: 250px;
height: 150px;
border: 3px solid #10a725;
}
</style>
</head>
<body>
<div id="main">
  <h1>Ejemplo de colores en RGBA</h1>
  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
   <div class="padre">
		<div class="hijo">
		   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type an</p>
		</div>
   </div>
   <p><a title="Regresar al post " href="https://neysitc.com/tutoriales/css/no-heredar-la-opacidad-o-transparencia-con-css-y-rgba/">Regresar al post del ejemplo..</a></p>
 </div>
 </body>
</html>

Puedes ver la demostración del ejemplo desde aquí, en el ejemplo notamos que el div con la clase .hijo no heredó la transparencia del div contenedor ¿Intersante no? y lo más importante es que funciona en la mayoría de navegadores de hoy y todas las versiones de Internet Explorer de la versión 5.5 para arriba. ;)