如何使用 Less 编译器将十六进制颜色转换为 rgba？

我有以下密码:

@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)。

因此，我需要在代码中用一个从 @color变量生成 rgba()值的 Less 函数替换 rgba(209, 72, 54, 1)。

我怎么能用“更少”做到这一点呢？

85956 次浏览
小开

如果不需要 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/

小开

返回文章页面减少混杂译者:

.background-opacity(@color, @opacity) {
@rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);


background-color: @rgba-color;


// Hack for IE8:
background: none\9; // Only Internet Explorer 8
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // Internet Explorer 9 and down
// Problem: Filter gets applied twice in Internet Explorer 9.
// Solution:
&:not([dummy]) {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9
}
}

试试看。

编辑: 正如在 < a href = “ https://stackoverflow. com/questions/6506085/rgba-behind-with-IE-filter-Alternative-IE9-renders-both”> rgba 背景和 IE 过滤器替代: IE9呈现两者! 中看到的那样，我向混合器添加了一些行。

小开

实际上，Less 语言附带了一个名为 fade的嵌入式函数。传递一个颜色对象和绝对不透明度% (值越高表示透明度越低) :

fade(@color, 50%);   // Return @color with 50% opacity in rgba
小开

使用最近的 Less update 3.81，似乎只能在 rgba ()函数中使用两个参数。

rgba(white, 0.3) or rgba(white, 30%) => rgba(255, 255, 255, 0.3)

对我有用，但我在 官方文件里找不到。


提交答案