Twitter bootstrap hex to rgba?

Question

Ho una variabile che viene utilizzata nei miei fogli .less.

La variabile è in formato esadecimale #f57e20.

Voglio usare quel colore ma aggiungere un canale alfa ad esso.

voglio finire con rgba(245, 126, 32, 0.5)

Fa bootstrap o .less avere a che fare questo?

Answer 1

ci sono un po 'costruito nelle funzioni in less.js e mixins da Bootstrap che si potrebbe usare:

Questa è una funzione less.js:

Questi sia provocare:

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

Oppure utilizzare un mixin bootstrap:

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

che si traduce in:

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

io includere il codice (fisso) per i translucent mixins qui per l'archiviazione, in quanto (ultimo ho controllato) non è più incluso come di 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

Si consiglia di provare:

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

che dovevo fare qualcosa di simile quando si scrive un mixin rapido che ha usato box-sh Adow.