Convierta Hex a RGBa para opacidad de fondo usando SASS

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *