सैस / कम्पास - हेक्स, आरजीबी, या नामांकित रंग को आरजीबीए में बदलें

Question

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

@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);

Answer 1

Sass में निर्मित फ़ंक्शन का उपयोग करेंrgba

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

उदाहरण:

rgba (# 102030, 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);

Comments

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

— पट न्यूवेल

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

— अधिकतम

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

— जॉन

@jon ब्लॉकचेन सीधे सैस डॉक्यूमेंटेशन से है। इसके बजाय संबंधित बिल्ट-इन फ़ंक्शन से जोड़ने के लिए। मैंने सोचा कि उत्तर में संबंधित दस्तावेज को शामिल करना उपयोगी होगा। क्षमा करें, यह भ्रामक था।

— अधिकतम

ऊँ दुः। Arrg। इससे पहले कि आप इसके बारे में सोचने की कोशिश करें, हमेशा बॉक्स में देखें। शीश!

— dudewad

Answer 2

मैं rgbapng कम्पास प्लगइन का उपयोग करता हूं

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

इंस्टॉल

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);

Comments

वाह ... बहुत बढ़िया। मैं कम्पास की शक्ति से उड़ा रहा हूं। प्रतिक्रिया के लिए धन्यवाद

— पैट नेवेल

Answer 3

Rgba फ़ंक्शन बिना किसी पारदर्शिता के रंग पर काम नहीं करता है, यह फिर से एक हेक्स देता है। सब के बाद, यह हेक्स को आरजीबी में बदलने के लिए नहीं है, हम सिर्फ हेक्स से लाभ कमा रहे हैं अल्फा (अभी तक) की अनुमति नहीं देता है।

rgba(#fff, 1) // returns #fff

तो, मैं अल छोटे कार्य करता है जो आरजीबी स्ट्रिंग का निर्माण करता है। मुझे अभी के लिए पारदर्शिता से निपटने की आवश्यकता नहीं है।

@function toRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}

Answer 4

IE के ## AARRGGBB प्रारूप के लिए भी ie-hex-str () है:

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

Answer 5

from_hex(hex_string, alpha = nil);

से प्रलेखन :

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