如何使用较less的编译器将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) 。

所以我需要用我的@colorvariables生成rgba()值的Less函数replace我的代码中的rgba() @color 。

我怎样才能用Less来做到这一点？

Answer 1

实际上，LESS语言带有一个名为fade的embedded函数。 您传递一个颜色对象和绝对不透明度％（较高值意味着不太透明）：

 fade(@color, 50%); // return @color with 50% opacity in rgba 

Answer 2

如果你不需要一个字母键，你可以简单地使用颜色的hex表示。 alpha值为1的rgba颜色与hex值相同。 这里有一些例子来certificate：

 @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; } 

在线testing此代码： http : //lesstester.com/

Answer 3

我less混搭：

 .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 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中添加了一些行。