2012-02-14 14 views
67

में कनवर्ट करें यह कम्पास 101 हो सकता है, लेकिन क्या किसी ने मिश्रित लिखा है जो रंग के अल्फा मान को सेट करता है? आदर्श रूप में, मैं रंग परिभाषा के किसी भी रूप में लेने के लिए, और लागू पारदर्शिता mixin चाहते हैं:सास/कम्पास - हेक्स, आरजीबी, या नामित रंग को आरजीबीए

@include set-alpha(red, 0.5);   //prints rgba(255, 0, 0, 0.5); 
@include set-alpha(#ff0000, 0.5);  //prints rgba(255, 0, 0, 0.5); 
@include set-alpha(rgb(255,0,0), 0.5); //prints rgba(255, 0, 0, 0.5); 

उत्तर

153

का प्रयोग करें rgba function built into Sass

एक रंग की अस्पष्टता सेट करता है।

उदाहरण:

RGBA (# 102,030, 0.5) => RGBA (16, 32, 48, 0.5)
RGBA (नीला, 0.2) => RGBA (0, 0, 255, 0.2)

पैरामीटर:
(रंग) रंग
(संख्या) अल्फा - 0 और 1

रिटर्न बीच की कोई संख्या:
(रंग)

कोड:

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5); 
+3

विश्वास नहीं कर सकता कि मैंने कोशिश नहीं की है। बहुत बहुत धन्यवाद –

+0

@jon क्या आप मेरे उत्तर के बारे में भ्रमित करने के बारे में बता सकते हैं ताकि मैं इसे सुधार सकूं? – maxbeatty

+0

@maxbeatty मुझे यकीन नहीं है कि मेरी टिप्पणी के साथ क्या हुआ लेकिन मैं "==>" द्वारा उलझन में था ... यह हिंडसाइट में स्पष्ट प्रतीत होता है, लेकिन जब आप खो रहे हैं तो टिप्पणियों से आवश्यक कोड बताना वाकई मुश्किल है। मुझे लगता है कि इसे कोड ब्लॉक में केवल वास्तविक उपयोग योग्य कोड शामिल करके अधिक स्पष्ट किया जा सकता है। – jon

8

मैं उपयोग rgbapng compass plugin

rgbapng क्रॉस-ब्राउज़र * संगत RGBA सहायता प्रदान करने के लिए एक कम्पास प्लगइन है। यह आरजीबीए का समर्थन नहीं करने वाले ब्राउज़र के लिए फ्लाई पर सिंगल पिक्सेल अल्फा-पारदर्शी पीएनजी बनाकर काम करता है। यह शुद्ध रूबी ChunkyPNG लाइब्रेरी का उपयोग करता है जिसके परिणामस्वरूप परेशानी मुक्त स्थापना और परिनियोजन होता है।

स्थापित

gem install compass-rgbapng 

प्रयोग

@include rgba-background(rgba(0,0,0,0.75)); 

संकलित करने के लिए:

background: url('/images/rgbapng/000000bf.png?1282127952'); 
background: rgba(0, 0, 0, 0.75); 
+0

व्हा ... भयानक। मुझे कंपास की शक्ति से उड़ा दिया गया है। जवाब के लिए धन्यवाद –

3

वहाँ भी IE के ## AARRGGBB प्रारूप के लिए यानी हेक्स-str() है:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(#fdfdfd)}', endColorstr='#{ie-hex-str(#f6f6f6)}',GradientType=0); /* IE6-9 */ 
2
from_hex(hex_string, alpha = nil); 

documentation से:

एक मान्य सीएसएस हेक्स स्ट्रिंग से एक नया रंग बनाएँ। अग्रणी हैश वैकल्पिक है।

संबंधित मुद्दे