Twitter bootstrap hex to rgba?

Question

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

color以HEX格式#f57e20表示。

我想使用该color但添加一个alpha通道。

我希望最终得到rgba(245, 126, 32, 0.5)

Bootstrap或less与此有关吗？

- Hailwood

Answer 1

在 less.js 中有一些内置函数和来自Bootstrap的混合器可供使用：

以下是一个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 混合代码，供存档之用，因为据我所知，它在 Bootstrap 3.0.0 中已不再包含:

// 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);
  }
}

- jonschlinkert

Answer 2

你可以尝试以下方法：

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

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

- samael

---

很好地运作，没有任何混合！Bootstrap 3.3。 - Powerriegel

@el-teedee 不行，因为这种膨胀的 rgba(red(@color), green(@color), blue(@color), @alpha) 没有被接受的答案中的正确 fade(@color, @alpha); 更具优势。 - seven-phases-max

@seven-phases-max 这是我看到的优势：我成功地使用了background-color: rgba(red(@color), green(@color), blue(@color), @opacity);获得了我的alpha背景，因为我的框架使用Bootstrap，但不使用less.js进行编译，因此当使用fade(@color, @opacity);时会出现异常no viable alternative at input 'fade' in abstract mixin or namespace (which started at 22:1)。听起来对我很有优势 ;) - el-teedee

@el-teedee - fade 函数是 Less 语言的一部分。如果你的框架不支持它，那么它与 Less 没有任何关系。因此，这只是一些奇特的东西，很难指导哪个答案应该被接受或不被接受。 - seven-phases-max

抱歉，在第一次尝试中犯了一个错误。最终我成功地使用 fade，并且没有任何异常情况，总结为 @myColor: fade(red, 30%);.myMixin ( @color: transparent; @opacity: 80%) { background-color: @color; }.myComponent1() { .myMixin(@color1, 70%); }.myComponent2() { .myMixin(@color2, 40%); } - el-teedee