更改变量较小的背景不透明度

Question

我有以下LESS变量：@yellow:#fbba00;

我想将此颜色应用于tr opacity: 0.2的背景。

我尝试了以下操作，但问题是不透明度应用于整个tr ，而不是仅应用于背景。

我看到了几个涉及背景不透明的主题（1，2），但他们总是使用rgba()来设置颜色。它与我要找的东西不匹配（LESS变量）。

在LESS / CSS文件中：

@yellow: #fbba00;

.bg-light-yellow {
    background-color: @yellow;
    opacity: 0.2;
}

在HTML页面中：

<tr class="bg-light-yellow">
    ...
</tr>

Answer 1

每this answer，LESS有一个名为fade的嵌入式函数。

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

所以这个

@yellow: #fbba00;

.bg-light-yellow {
    background-color: fade(@yellow, 20%);
}

符合此

.bg-light-yellow {
  background-color: rgba(251, 186, 0, 0.2);
}

LESS Reference