2012-09-25 16 views
13

मेरे पास एक चर है जिसका उपयोग मेरी बेकार चादरों में किया जाता है।ट्विटर बूटस्ट्रैप हेक्स rgba करने के लिए?

परिवर्तनीय हेक्स प्रारूप #f57e20 में है।

मैं उस रंग का उपयोग करना चाहता हूं लेकिन इसमें अल्फा चैनल जोड़ना चाहता हूं।

मैं rgba(245, 126, 32, 0.5)

के साथ समाप्त करना चाहते हैं बूटस्ट्रैप करता है या .less यह करने के लिए कुछ भी नहीं है?

उत्तर

18

रहे हैं एक कुछ बूटस्ट्रैप से less.js और mixins कि आप इस्तेमाल कर सकते हैं में काम करता है में बनाया गया:

इन दोनों में परिणाम:

यह एक less.js समारोह है

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

या एक बूटस्ट्रैप mixin का उपयोग करें:

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

कौन सा में परिणाम:

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

मैं हूँ (पिछले मैं जाँच की) यह अब बूटस्ट्रैप 3.0.0 के रूप में शामिल है के बाद से, संग्रह प्रयोजनों के लिए translucent mixins यहाँ (निर्धारित) कोड में शामिल हैं:

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

आप कोशिश करना चाहते हो सकता है:

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

मैं जब एक त्वरित mixin जो बॉक्स श इस्तेमाल किया लेखन कुछ इसी तरह करना पड़ा adow।

+0

किसी भी मिश्रण के बिना काफी अच्छी तरह से काम करता है! बूटस्ट्रैप 3.3। – Corni