Sass - 将Hex转换为RGBa以获得背景不透明度 [英] Sass - Converting Hex to RGBa for background opacity
问题描述
我有以下Sass mixin,它是 RGBa示例的一半完整修改:
I have the following Sass mixin, which is a half complete modification of an RGBa example:
@mixin background-opacity($color, $opacity: .3) {
background: rgb(200, 54, 54); /* The Fallback */
background: rgba(200, 54, 54, $opacity);
}
我已应用 $ opacity
确定,但现在我是一个卡住了 $ color
部分。
我将发送到mixin的颜色将是HEX而不是RGB。
I have applied $opacity
ok, but now I am a stuck with the $color
part.
The colors I will be sending into the mixin will be HEX not RGB.
我的示例使用将是:
element {
@include background-opacity(#333, .5);
}
如何在此mixin中使用HEX值?
How can I use HEX values within this mixin?
推荐答案
rgba()函数可以接受单个十六进制颜色以及十进制RGB值。例如,这将工作很好:
The rgba() function can accept a single hex color as well decimal RGB values. For example, this would work just fine:
@mixin background-opacity($color, $opacity: 0.3) {
background: $color; /* The Fallback */
background: rgba($color, $opacity);
}
element {
@include background-opacity(#333, 0.5);
}
如果你需要将十六进制颜色分解为RGB组件,可以使用红色(), green()和 blue()函数:
If you ever need to break the hex color into RGB components, though, you can use the red(), green(), and blue() functions to do so:
$red: red($color);
$green: green($color);
$blue: blue($color);
background: rgb($red, $green, $blue); /* same as using "background: $color" */
这篇关于Sass - 将Hex转换为RGBa以获得背景不透明度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!