Sass -将十六进制转换为RGBa以获得背景不透明度
Sass -将十六进制转换为RGBa以获得背景不透明度
提问于 2012-06-07 17:49:45
我有以下Sass混入，它是对RGBa示例的半完整修改
@mixin background-opacity($color, $opacity: .3) {
background: rgb(200, 54, 54); /* The Fallback */
background: rgba(200, 54, 54, $opacity);
} 我已经申请了$opacity ok，但现在我被$color部分卡住了。我将发送到混合的颜色将是十六进制，而不是RGB。
我的示例使用如下：
element {
@include background-opacity(#333, .5);
}如何在此混合中使用十六进制值？
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-06-08 05:00:25
rgba() function可以接受单个十六进制颜色以及十进制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()、green()和blue()函数来实现：
$red: red($color);
$green: green($color);
$blue: blue($color);
background: rgb($red, $green, $blue); /* same as using "background: $color" */Stack Overflow用户
发布于 2015-08-31 17:26:33
有一个内置的混入：transparentize($color, $amount);
background-color: transparentize(#F05353, .3);数量应在0到1之间；
Official Sass Documentation (Module: Sass::Script::Functions)
Stack Overflow用户
发布于 2017-05-05 06:48:12
SASS有一个内置的rgba() function来计算值。
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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10929458
复制相关文章
相似问题
腾讯云开发者
