解决方法
在Bootstrap的less.js和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,0.5);
}
.test2 {
background: rgba(245,0.5);
}
或者使用bootstrap mixin：
.test3 {
#translucent > .background(#f57e20,0.5); // use HSLA mixin
}
其结果如下：
.test3 {
background-color: rgba(244,123,31,0.5);
}
由于(最后一次检查)它不再包含在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);
}
}
