Efecto transparencia
Transparencia de un elemento:
.elemento_semitransparente {
opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
}
Los imprescindibles:
* opacity: Regla estándar válida en CSS3. Funciona en Firefox, Safari, y Opera.
* filter:alpha: Para que funcione en Internet Explorer.
Los “por si acaso”:
* -moz-opacity: Para antiguas versiones de Mozilla como Netscape.
* -khtml-opacity: Para antiguas versiones de Safari.
Los valores numéricos obviamente permiten el rango, según el caso, de 0 a 1, o de 0 a 100, para variar el nivel de transparencia.
Transparencia de un color:
.elemento_semitransparente {
background: rgba(200, 54, 54, 0.5);
}
Las 3 primeras cifras definen el color, y la cuarta el grado de transparencia. La principal diferencia con el método anterior es que así la propiedad de transparencia no se transmite a los elementos “hijo” (children). Funciona en Firefox3, Safari, y Google Chrome, y falla en Internet Explorer y Opera.
Para que funcione en IE:
<!--[if IE]>
<style type="text/css">
.elemento_semitransparente {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
</style>
<![endif]-->
< ![endif]-->
En cualquiera de los casos, aunque te quede “chulo”, olvídate de validar.
CSS Transparency Settings for All Browsers | CSS-Tricks
RGBa Browser Support | CSS-Tricks
"
"
