Twitter bootstrap hex到rgba？

Question

让一个颜色变量用于sheet.less.

颜色为HEX格式#f57e20.

我想使用该颜色,但添加一个alpha通道.

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

并引导或更少有什么关系呢？

Answer 1

也有一些内置的功能,在less.js和混入的引导,你可以使用:

这是一个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 mixin:

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

结果如下:

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

我将translucent这里的mixins 的(固定)代码包含在归档中,因为(最后我检查过)它不再包含在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);
  }
}