如何转换为十六进制的颜色有不太编译器RGBA？(How do I convert a hexadec

我有以下代码：

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

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

我怎么可以用更少做到这一点？

Answer 1:

其实，越少的语言有一个称为嵌入式功能fade 。 你传递一个颜色对象，并绝对不透明度％（较高值意味着更少的透明）：

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

Answer 2:

如果你不需要一个字母键，你可以简单地使用颜色的十六进制表示。 用的“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/

Answer 3:

我减混入：

.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
    }
}

试试吧。

编辑：作为上看到的RGBA背景IE过滤器替代：IE9呈现两个！ ，我增加了一些行的混入。

Answer 4:

这似乎与最近少更新3.81 ，你可以在RGBA（）函数只使用两个参数。

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

这对我的作品，但在我找不到它的官方文档 。

文章来源: How do I convert a hexadecimal color to rgba with the Less compiler?