Twitter引导十六进制到rgba？

Question

让一个color变量用在sheet.less中。

颜色是十六进制格式#f57e20。

我想使用那个颜色，但要给它添加一个 alpha 通道。

我想以rgba(245, 126, 32, 0.5)结束

Bootstrap 或 less 有什么相关的吗？

Answer 1

您可以使用less.js 中的一些内置函数和Bootstrap中的mixins：

这是一个less.js 函数：

// using a variable

@color: #f57e20;

.test {
  background: fade(@color, 50%); // return @color with 50% transparency
}

// or without the color variable

.test2 {
  background: fade(#f57e20, 50%); // return @color with 50% transparency
}

这些都导致：

.test {
  background: rgba(245, 126, 32, 0.5);
}
.test2 {
  background: rgba(245, 126, 32, 0.5);
}

或者使用 Bootstrap 混合：

.test3 {
  #translucent > .background(#f57e20, 0.5); // use HSLA mixin
}

结果：

.test3 {
  background-color: rgba(244, 123, 31, 0.5);
}

我将在此处包含 translucent mixins 的（固定）代码以用于存档目的，因为（我上次检查）它不再包含在 Bootstrap 3.0.0： p>

// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
  .background(@color: @white, @alpha: 1) {
    background-color: fade(@color, @alpha);
  }
  .border(@color: @white, @alpha: 1) {
    border-color: fade(@color, @alpha);
    .background-clip(padding-box);
  }
}

Answer 2

你不妨试试：

background: rgba(red(@color), green(@color), blue(@color), @alpha);

在编写使用 box-shadow 的快速 mixin 时，我不得不做类似的事情。