如何使用Less编译器将十六进制颜色转换为rgba？
如何使用Less编译器将十六进制颜色转换为rgba？
提问于 2013-02-14 02:54:44
我有以下代码：
@color : #d14836;
.stripes span {
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
background-size: 30px 30px;
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)),
color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent),
to(transparent));我需要将@color转换为rgba(209, 72, 54, 1)。
因此，我需要用一个Less函数替换代码中的rgba(209, 72, 54, 1)，该函数从@color变量生成rgba()值。
我怎样才能用Less做到这一点呢？
回答 3
Stack Overflow用户
发布于 2013-11-26 05:32:11
实际上，较少的语言附带了一个名为fade的嵌入式函数。传递一个颜色对象和绝对不透明度%(值越高意味着透明度越低)：
fade(@color, 50%); // Return @color with 50% opacity in rgbaStack Overflow用户
发布于 2013-02-14 06:00:43
如果你不需要alpha键，你可以简单地使用颜色的十六进制表示。alpha为“1”的rgba颜色与十六进制值相同。
以下是一些示例来演示这一点：
@baseColor: #d14836;
html {
color: @baseColor;
/* color:#d14836; */
}
body {
color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1);
/* color:#d14836; */
}
div {
color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 0.5);
/* rgba(209, 72, 54, 0.5); */
}
span {
color: fade(@baseColor, 50%);
/* rgba(209, 72, 54, 0.5); */
}
h3 {
color: fade(@baseColor, 100%)
/* color:#d14836; */
}在线测试这段代码：http://lesstester.com/
Stack Overflow用户
发布于 2018-10-11 13:11:11
使用最近更新较少的3.81，您可以在rgba()函数中只使用两个参数。
rgba(white, 0.3) or rgba(white, 30%) => rgba(255, 255, 255, 0.3)它对我有效，但我在the official documentation中找不到它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14860874
复制相关文章
相似问题