En este artículo, veremos cómo configurar la opacidad del color con RGBA en CSS. RGBA es un formato de color, que básicamente contiene valores para rojo, verde, azul respectivamente y ‘A’ en RGBA significa Alfa. Para establecer la opacidad del color, cambiamos principalmente el valor de alfa. El valor de alfa varía de 0,0 (totalmente transparente) a 1,0 (totalmente opaco).
Sintaxis:
class/id { attribute: rgba(val1, val2, val3, val4) }
Ejemplo: En el siguiente ejemplo, usamos la propiedad CSS background-color con valor alfa (opacidad).
HTML
<!DOCTYPE html> <html> <body> <h2 style="color:green"> GeeksforGeeks </h2> <b>Setting opacity with rgba</b> <p class="para1" style= "background-color: rgba(255, 0, 0, 0.0);"> Red </p> <p class="para2" style= "background-color:rgba(255, 0, 0, 0.9) ;"> Red </p> <p class="para3" style= "background-color: rgba(0, 255, 0, 0.3);"> Green </p> <p class="para4" style= "background-color: rgba(0, 255, 0, 0.7) ;"> Green </p> <p class="para5" style= "background-color:rgba(0, 0, 255, 0.4) ;"> Blue </p> <p class="para6" style= "background-color: rgba(0, 0, 255, 1.0);"> Blue </p> </body> </html>
Salida: podemos ver que diferentes valores de alfa representan las diferentes transparencias.
RGBA
Publicación traducida automáticamente
Artículo escrito por bhartiomee25 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA