136

我有以下代码：

@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)生成一个值的 Less 函数替换。rgba()@color

我怎样才能用更少的东西做到这一点？

4

4 回答 4

360

实际上，Less 语言带有一个名为fade. 您传递一个颜色对象和绝对不透明度 %（较高的值意味着透明度较低）：

fade(@color, 50%);   // Return @color with 50% opacity in rgba
于 2013-11-25T21:32:11.197 回答
107

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

于 2013-02-13T22:00:42.990 回答
12

我的少混音：

.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 呈现两者！，我在 mixin 中添加了一些行。

于 2013-09-18T18:01:23.323 回答
2

似乎在最近的 Less 更新3.81中，您可以在 rgba() 函数中仅使用两个参数。

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

它对我有用，但我在官方文档中找不到它。

于 2018-10-11T05:11:10.727 回答