7

我正在尝试在 CSS 预处理器 LESS 中编写一个块，它将执行以下操作：

@transparent_background(@color; @alpha: .8)
{
  background: @color;
  background: rgba(<color R value>, <color G value>, <color B value>, @alpha);
}

如果它是标准的十六进制定义（即#rrggbb），有什么方法可以从@color 中获取RGB 值？如果@color 以其他方式定义，有没有办法做到这一点？

编辑：解决方案

@transparent_background(@color; @alpha: .8)
{
  background: @color;
  background: @color + rgba(0, 0, 0, @alpha);
}
4

4 回答 4

3

尝试这个：

background: @color - rgba(0, 0, 0, 1.0) + rgba(0, 0, 0, @alpha);

减法将清除 alpha 通道，@color然后您只需将所需的添加@alpha到 alpha 通道。颜色具有全套操作符，并且在对两种颜色进行操作时，它们会逐个组件地工作；颜色在内部存储为 RGBA 组件，因此这应该可以工作。此外，Alpha 通道被标准化为在区间内[0, 1.0]，因此从 Alpha 通道中减去 1.0 应该可以清除它而不会导致任何问题。

我现在没有设置 CSS LESS，所以我无法检查，但这值得一试。

于 2010-12-15T01:43:27.210 回答
2

我知道这是一个老问题，但如果您只想添加一个 alpha 值，只需使用fade(@color, @alpha). 颜色可以是十六进制、rgba 或 hsla。

于 2012-06-20T21:42:30.050 回答
2

请注意，您还可以继续使用 LESS 的淡入/淡出功能：

.alpha(@color, @alpha: 80)
{
    background-color: fadeout(@color, (100 - @alpha));
}

因此，.alpha(red, 25)将导致背景颜色为rgba(255, 0, 0, 0.25)

于 2012-01-06T11:20:14.100 回答
2

所有解决方案都不再有效，但这个有效（感谢@Elyse）：

.alpha(@color, @alpha: 0.8) {
    color: @color;
    color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}

该hsla()功能虽然没有在 LESS 网站上宣传，但在源代码中定义。

于 2012-01-01T19:04:57.847 回答