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.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.