La función rgba() es una función incorporada en CSS que se usa para definir los colores usando el modelo Red-Green-Blue-Alpha (RGBA). Es una extensión de los valores de color rgb() que contiene un canal alfa que especifica la transparencia del color.
Sintaxis:
rgba( red, green, blue, alpha )
Parámetros: Esta función acepta 4 parámetros como se describe a continuación:
- rojo: Este parámetro se utiliza para definir la intensidad del color rojo. Es un valor entero que se encuentra entre 0 y 255, o como un valor porcentual entre 0% y 100%.
- verde: Este parámetro se utiliza para definir la intensidad del color verde. Es un valor entero que se encuentra entre 0 y 255, o como un valor porcentual entre 0% y 100%.
- azul: Este parámetro se utiliza para definir la intensidad del color azul. Es un valor entero que se encuentra entre 0 y 255, o como un valor porcentual entre 0% y 100%.
- alfa: este parámetro se utiliza para definir la opacidad y el valor se encuentra entre 0,0 (completamente transparente) a 1,0 (completamente opaco).
Ejemplo: Este ejemplo ilustra la función rgba() donde se muestran diferentes intensidades de color (es decir, rojo, azul y verde) con el valor específico para cada color, junto con el valor alfa para configurar la opacidad del color.
HTML
<!DOCTYPE html>
<html>
<head>
<title>rgba function</title>
<style>
.gfg1 {
background-color: rgba(1, 153, 0, 0.5);
text-align: center;
}
.gfg2 {
background-color: rgba(0, 255, 0, 0.5);
text-align: center
}
.gfg3 {
background-color: rgba(133, 150, 150, 0.5);
text-align: center
}
.gfg {
font-size: 40px;
font-weight: bold;
color: green;
text-align: center;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<h1>The rgba() Function</h1>
<p class="gfg1">Green</p>
<p class="gfg2">Light green</p>
<p class="gfg3">Light black</p>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la función rgba() se enumeran a continuación:
- cromo 1.0
- Borde 12.0
- Internet Explorer 9.0
- Firefox 3.0
- Safari 3.1
- Ópera 10.0