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

我有以下Sass mixin，这是对RGBa示例的一个完整修改：

@mixin background-opacity($color, $opacity: .3) {
    background: rgb(200, 54, 54); /* The Fallback */
    background: rgba(200, 54, 54, $opacity);
} 

我已经应用了$opacity确定，但现在我坚持使用$color部分。 我将发送到mixin的颜色将是HEX而不是RGB。

我的例子使用将是：

element {
    @include background-opacity(#333, .5);
}

我如何在这个mixin中使用HEX值？

---

rgba（）函数可以接受单个十六进制颜色以及十进制RGB值。 例如，这将工作得很好：

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

element {
     @include background-opacity(#333, 0.5);
}

但是，如果您需要将十六进制颜色分解为RGB组件，则可以使用红色（），绿色（）和蓝色（）函数来执行此操作：

$red: red($color);
$green: green($color);
$blue: blue($color);

background: rgb($red, $green, $blue); /* same as using "background: $color" */

---

有一个内置的mixin： transparentize($color, $amount);

background-color: transparentize(#F05353, .3);

金额应该在0到1之间;

官方Sass文档（模块：Sass :: Script :: Functions）

---

SASS有一个内置的rgba（）函数来评估值。

rgba($color, $alpha)

例如

rgba(#00aaff, 0.5) => rgba(0, 170, 255, 0.5)

一个使用你自己的变量的例子：

$my-color: #00aaff;
$my-opacity: 0.5;

.my-element {
  color: rgba($my-color, $my-opacity);
}

输出：

.my-element {
  color: rgba(0, 170, 255, 0.5);
}

链接地址: http://www.djcxy.com/p/87541.html

上一篇: Converting Hex to RGBa for background opacity

下一篇: Convert RGB to RGBA