使用 SASS 将十六进制转换为 RGBa 以获得背景不透明度

Sass rgba函数使用 Red-green-blue-alpha 模型来描述颜色，其中 alpha 用于为颜色添加不透明度。它的值范围在 0.0(完全透明)到 1.0(完全不透明)之间。该函数采用两个输入值——十六进制颜色代码和 alpha，并将十六进制代码转换为 RGBa 格式。

句法：

• 使用背景颜色属性：

  element {
      background-color: rgba(hex_value, opacity_value);
  }

• 使用具有提供十六进制回退的 background-color 属性的 mixin：

  @mixin background-opacity($color, $opacity) {
      background: $color;  /*Fallback */
      background: rgba($color, $opacity);
  }
  
  body {
       @include background-opacity(hex_value, opacity_value);
  }

下面的例子说明了上述方法：

示例 1：向十六进制代码添加 70% 的不透明度

  
GeeksforGeeks

• SAS代码：

  @mixin background-opacity($color, $opacity) {
      background: $color;
      background: rgba($color, $opacity);
  }
    
  body {
       @include background-opacity(#32DF07, 0.7);
  }
  

• 转换后的 CSS 代码：

  body {
    background: #32DF07;
    background: rgba(50, 223, 7, 0.7);
  }

输出：

示例 2：向十六进制代码添加 50% 的不透明度

    
     
       
     

  
GeeksforGeeks

• SAS代码：

  @mixin background-opacity($color, $opacity) {
      background: $color;
      background: rgba($color, $opacity);
  }
    
  body {
       @include background-opacity(#32DF07, 0.5);
  }
  

• 转换后的 CSS 代码：

  body {
    background: #32DF07;
    background: rgba(50, 223, 7, 0.5);
  }

输出：