Twitter bootstrap hex do rgba?

Question

Mam zmienną, która jest używana w moich arkuszach .less.

Zmienna jest w formacie szesnastkowym #f57e20.

Chcę użyć tego koloru, ale dodać do niego kanał alfa.

Chcę skończyć z rgba(245, 126, 32, 0.5)

Czy bootstrap lub .less ma nic, aby to zrobić?

Answer 1

Istnieje kilka wbudowanych funkcji w less.js i wstawek z Bootstrap, że można użyć:

Jest to funkcja less.js:

Są zarówno spowodować:

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

Albo użyć bootstrap mixin:

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

co skutkuje:

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

będę obejmować (stałe) kod na translucent wstawek tutaj w celach archiwizacyjnych, ponieważ (ostatnio sprawdziłem) nie jest już włączone jako od 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); 
    } 
} 

Answer 2

Możesz też spróbować:

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

musiałem zrobić coś podobnego pisząc krótki mixin który używany box-sh adow.