La propiedad de opacidad se usa en la imagen para describir la transparencia de la imagen. El valor de la opacidad se encuentra entre 0,0 y 1,0, donde el valor bajo representa una transparencia alta y el valor alto representa una transparencia baja. El porcentaje de opacidad se calcula como Opacidad% = Opacidad * 100 Para establecer la opacidad solo en el fondo y no en el texto que contiene. Se puede configurar utilizando los valores de color RGBA en lugar de la propiedad de opacidad porque el uso de la propiedad de opacidad puede hacer que el texto dentro de su elemento sea completamente transparente.
Sintaxis:
element {
background: rgba(red, green, blue, alpha);
// CSS property
}
Cada parámetro (rojo, verde y azul) define la intensidad del color entre 0 y 255. Los valores de color RGBA son una extensión de los valores de color RGB con un canal alfa que especifica la opacidad de un color. El parámetro alfa es un número entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>rgba property</title>
<style>
h1 {
color: green;
}
h1, h2 {
text-align: center;
}
div {
background: rgb(0, 151, 19);
padding: 10px;
text-align:justify;
}
div.first {
/*setting alpha = 0.1*/
background: rgba(0, 151, 19, 0.1);
}
div.second {
/*setting alpha = 0.3*/
background: rgba(0, 151, 19, 0.3);
}
div.third {
/*setting alpha = 0.6*/
background: rgba(0, 151, 19, 0.6);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Using RGBA color values:</h2>
<div class="first">
<p>This paragraph is shown at 10% opacity.</p></div>
<div class="second">
<p>This paragraph is shown at 30% opacity.</p></div>
<div class="third">
<p>This paragraph is shown at 60% opacity.</p></div>
<div><p>This is default.</p></div>
</body>
</html>
Producción: 
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA