如何使用少编译器将HEX颜色转换为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(209, 72, 54, 1) 。
因此，我需要更换rgba(209, 72, 54, 1)在我的代码与产生减函数rgba()从我的值@color变量。
我如何用Less来做到这一点？
实际上，LESS语言带有一个名为fade的嵌入函数。 你传递一个颜色对象和绝对不透明度％（更高的值意味着不太透明）：
fade(@color, 50%); // return @color with 50% opacity in rgba
如果你不需要一个字母键，你可以简单地使用颜色的十六进制表示。 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: none9; // Only IE8
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // IE9 and down
// Problem: Filter gets applied twice in IE9.
// Solution:
&:not([dummy]) {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9
}
}
尝试一下。
编辑：正如在IE过滤替代rgba背景上看到的：IE9呈现两个！ 我在mixin中添加了一些行。
链接地址: http://www.djcxy.com/p/15799.html