Web.CSS.Transparencia.
Para especificar las transparencia u opacidad de un elemento de un página se realiza con la propiedad opacity. Los valores que puede albergar son del 0.0, es decir, totalmente transparente hasta el 1.0 que no tiene ningún tipo de transparencia. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #4CAF50;
padding: 10px;
} div.first {
opacity: 0.1;
} div.second {
opacity: 0.3;
} div.third {
opacity: 0.6;
}
</style>
</head>
<body> <h1>Transparencias.</h1> <div class="first"><p>opacity 1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div></body>
</html>
Cada bloque tiene una opacidad distinta, pero esta propiedad tiene pequeño inconveniente, que tal efecto afecta también al texto.
Para solucionar este problema existe otra propiedad que es RGBA. En realidad no es una propiedad es la forma de añadir colores mediante RGB y añadiendo otro valor más para darle transparencia; el alpha(A). Un ejemplo para ver como funciona:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(76, 175, 80);
padding: 10px;
} div.first {
background: rgba(76, 175, 80, 0.1);
} div.second {
background: rgba(76, 175, 80, 0.3);
} div.third {
background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body> <h1>Transparencias con RGBA.</h1> <div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div></body>
</html>
Se hace como se ha visto hasta ahora, es decir, del 0–255 son los valores que puede albergar el R(red), G(grey), (blue) y A(alpha) los valores del 0.0 al 1.0 para especificar el nivel de transparencia u opacidad.
