La función Sass rgba usa el modelo rojo-verde-azul-alfa para describir los colores donde se usa alfa para agregar opacidad al color. Su valor oscila entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco). La función toma dos valores de entrada: el código de color hexadecimal y alfa, y convierte el código hexadecimal al formato RGBa.
Sintaxis:
- Usando la propiedad de color de fondo:
element { background-color: rgba(hex_value, opacity_value); } - Usando mixins con propiedad de color de fondo que proporciona respaldo hexadecimal:
@mixin background-opacity($color, $opacity) { background: $color; /*Fallback */ background: rgba($color, $opacity); } body { @include background-opacity(hex_value, opacity_value); }
Los siguientes ejemplos ilustran el enfoque anterior:
Ejemplo 1: agregar un 70 % de opacidad a un código hexadecimal
<!DOCTYPE html> <html> <head> <title>Converting Hex to RGBA for background opacity</title> </head> <body> <p>GeeksforGeeks</p> </body> </html>
- código SASS:
@mixin background-opacity($color, $opacity) {background: $color;background: rgba($color, $opacity);}body {@include background-opacity(#32DF07,0.7);} - Código CSS convertido:
body { background: #32DF07; background: rgba(50, 223, 7, 0.7); }
Producción:
Ejemplo 2: agregar un 50 % de opacidad a un código hexadecimal
<!DOCTYPE html> <html> <head> <title> Converting Hex to RGBA for background opacity </title> </head> <body> <p>GeeksforGeeks</p> </body> </html>
- código SASS:
@mixin background-opacity($color, $opacity) {background: $color;background: rgba($color, $opacity);}body {@include background-opacity(#32DF07, 0.5);} - Código CSS convertido:
body { background: #32DF07; background: rgba(50, 223, 7, 0.5); }
Producción:
Publicación traducida automáticamente
Artículo escrito por shruti10gandotra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA