मैं सीएसएस रंग चर में अपारदर्शिता कैसे लागू करूं?

Question

मैं इलेक्ट्रॉन में एक ऐप डिजाइन कर रहा हूं, इसलिए मेरे पास सीएसएस चर की पहुंच है। मैंने इसमें एक रंग चर को परिभाषित किया है vars.css:

:root {
  --color: #f0f0f0;
}

मैं इस रंग का उपयोग करना चाहता हूं main.css, लेकिन कुछ अपारदर्शिता के साथ:

#element {
  background: (somehow use var(--color) at some opacity);
}

मैं ऐसा कैसे कर पाऊंगा? मैं किसी भी प्रीप्रोसेसर का उपयोग नहीं कर रहा हूं, केवल सीएसएस। मैं एक ऑल-सीएसएस जवाब पसंद करूंगा, लेकिन मैं जावास्क्रिप्ट / jQuery को स्वीकार करूंगा।

मैं उपयोग नहीं कर सकता opacityक्योंकि मैं एक पृष्ठभूमि छवि का उपयोग कर रहा हूं जो पारदर्शी नहीं होनी चाहिए।

Comments

तो ऐसा लगता है कि आपको एक से अधिक तत्वों का उपयोग करना चाहिए ....

— epascarello

मैं नहीं करना पसंद करूंगा, लेकिन ऐसा लगता है कि मुझे ...:

— जोशोरोबोट

AHHHHH !!!!! यह कितना कष्टप्रद है! अब यह लगभग 2020 है। रंग बीनने वाले को # रंग मिलता है। अल्फा / rgba सैस / स्टाइलस में काम नहीं करता है - क्योंकि यह आरजीबी मूल्य नहीं है। क्या मुझे हर एक रंग के लिए अपने सीएमएस में 4 स्लाइडर्स डालने चाहिए?

— शेरिफडेरेक

Answer 1

आप एक मौजूदा रंग मान नहीं ले सकते हैं और इसे एक अल्फा चैनल लागू कर सकते हैं। अर्थात्, आप एक मौजूदा हेक्स मान नहीं ले सकते हैं #f0f0f0, जैसे कि इसे एक अल्फा घटक दें और परिणामी मान को किसी अन्य गुण के साथ उपयोग करें।

हालाँकि, कस्टम गुण आपको अपने हेक्स मान को उपयोग के लिए RGB तिगुनी में परिवर्तित करने की अनुमति देते हैं rgba(), उस मूल्य को कस्टम प्रॉपर्टी (अल्पविराम सहित!) में स्टोर करते हैं, उस मान को अपने इच्छित अल्फ़ा मान के साथ उपयोग var()करते हुए प्रतिस्थापित करते हैं rgba(), और यह सिर्फ काम:

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}

<p id="element">If you can see this, your browser supports custom properties.</p>

यह सच होने के लिए लगभग बहुत अच्छा लगता है। ¹ यह कैसे काम करता है?

जादू इस तथ्य में निहित है कि कस्टम गुणों के मूल्यों को प्रतिस्थापित किया जाता है जैसे कि संपत्ति के मूल्य var()में संदर्भों की जगह लेते हैं, इससे पहले कि संपत्ति के मूल्य की गणना की जाती है। इसका मतलब यह है कि जहां तक ​​कस्टम गुणों का संबंध है, --colorआपके उदाहरण का मूल्य तब तक रंग मूल्य नहीं है जब तक कि एक var(--color)अभिव्यक्ति कहीं दिखाई नहीं देती है जो एक रंग मूल्य (और केवल उस संदर्भ में) की अपेक्षा करता है। से खंड 2.1 सीएसएस-चर कल्पना की:

कस्टम गुणों के लिए अनुमत सिंटैक्स अत्यंत अनुमत है। <घोषणा-मूल्य> उत्पादन एक या एक से अधिक टोकन के किसी भी क्रम से मेल खाता है, इसलिए जब तक कि अनुक्रम में </ string-token>, <bad-url-token>, बेजोड़ <) नहीं है - token>,]] - टोकन>, या <} - टोकन>, या शीर्ष-स्तर <अर्धविराम-टोकन> टोकन या <delim-token> "के मूल्य के साथ टोकन"!

उदाहरण के लिए, निम्नलिखित एक मान्य कस्टम संपत्ति है:

--foo: if(x > 5) this.width = 10;

हालांकि यह मान एक चर के रूप में स्पष्ट रूप से बेकार है, क्योंकि यह किसी भी सामान्य संपत्ति में अमान्य होगा, इसे जावास्क्रिप्ट द्वारा पढ़ा और कार्य किया जा सकता है।

और धारा 3 :

यदि किसी गुण में एक या अधिक var () फ़ंक्शंस होते हैं, और वे फ़ंक्शन सिंटैक्टिक रूप से मान्य होते हैं, तो संपूर्ण प्रॉपर्टी के व्याकरण को पार्स समय पर मान्य होना चाहिए। यह केवल गणना-मूल्य समय पर सिंटैक्स-चेक किया गया है, बाद में var () फ़ंक्शन को प्रतिस्थापित किया गया है।

इसका मतलब यह है कि 240, 240, 240आपके द्वारा ऊपर देखा गया मूल्य घोषित किए जाने से पहले सीधे rgba()फ़ंक्शन में प्रतिस्थापित हो जाता है। तो यह:

#element {
  background-color: rgba(var(--color), 0.8);
}

जो पहले सीएसएस वैध प्रतीत नहीं होता है क्योंकि यह rgba()उम्मीद करता है कि कम से कम चार अल्पविराम से अलग-अलग संख्यात्मक मान इस प्रकार नहीं बनेंगे:

#element {
  background-color: rgba(240, 240, 240, 0.8);
}

जो निश्चित रूप से, सीएसएस पूरी तरह से वैध है।

इसे एक कदम आगे बढ़ाते हुए, आप अल्फा घटक को अपनी कस्टम संपत्ति में संग्रहीत कर सकते हैं:

:root {
  --color: 240, 240, 240;
  --alpha: 0.8;
}

और इसे एक ही परिणाम के साथ प्रतिस्थापित करें:

#element {
  background-color: rgba(var(--color), var(--alpha));
}

यह आपको अलग-अलग अल्फा वैल्यू देता है जिसे आप ऑन-द-फ्लाई को स्वैप कर सकते हैं।

---

¹ _{ठीक है, यह है, अगर आप एक ब्राउज़र में कोड स्निपेट चला रहे हैं जो कस्टम गुणों का समर्थन नहीं करता है।}

Comments

यह सुंदर है

— roberrrt-s

@ रोबर्ट: यह कुछ ऐसा है जिस पर मुझे जल्दी पता चल जाना चाहिए, वास्तव में, जैसा कि मैंने इन उत्तरों को पहले पोस्ट किया था।

— BoltClock

हम इस वर जा रहे हैं, क्यों की तरह कुछ का उपयोग नहीं: .element2 { background-color: rgba(var(--red), var(--low-opacity); }। इस तरह आप चर का उपयोग पूरी तरह से कर सकते हैं :)।

— roberrrt-s

दुर्भाग्य से, मूल्य "240, 240, 240"एक रंग बीनने वाले के साथ संपादन योग्य नहीं है। जब आप अपने जीयूआई के लिए सही रंग खोजने की आवश्यकता होती है, तो यह एक बड़ी याद आती है।

— GetFree

@ s3c सिंटैक्स var(--hex-color)99को दो टोकन में बदल दिया जाता है #333333 99( टोकन को अलग करने के लिए स्थान पर ध्यान दें) जो स्पष्ट रूप से वह चीज नहीं है जो आप चाहते हैं। कस्टम गुणों को मूल रूप से टोकन की प्रतिलिपि बनाने के लिए परिभाषित किया गया था, तार नहीं और यह अंतिम परिणाम है। अब इसे ठीक करने में बहुत देर हो चुकी है।

— मिक्को रेंटालिनेन

Answer 2

मुझे पता है कि ओपी एक प्रीप्रोसेसर का उपयोग नहीं कर रहा है, लेकिन मुझे मदद मिलेगी यदि निम्नलिखित जानकारी यहां उत्तर का हिस्सा होती (मैं अभी तक टिप्पणी नहीं कर सकता, अन्यथा मैंने @BoltClock उत्तर में टिप्पणी की होती।

यदि आप उपयोग कर रहे हैं, जैसे scss, तो ऊपर दिया गया उत्तर विफल हो जाएगा, क्योंकि scss एक scss- विशिष्ट rgba () / hsla () फ़ंक्शन के साथ शैलियों को संकलित करने का प्रयास करता है, जिसके लिए 4 मापदंडों की आवश्यकता होती है। हालाँकि, rgba () / hsla () भी मूल css फ़ंक्शन हैं, इसलिए आप scss फ़ंक्शन को बायपास करने के लिए स्ट्रिंग प्रक्षेप का उपयोग कर सकते हैं।

उदाहरण (sass 3.5.0+ में मान्य):

:root {
    --color_rgb: 250, 250, 250;
    --color_hsl: 250, 50%, 50%;
}

div {
    /* This is valid CSS, but will fail in a scss compilation */
    background-color: rgba(var(--color_rgb), 0.5);
    
    /* This is valid scss, and will generate the CSS above */
    background-color: #{'rgba(var(--color_rgb), 0.5)'};
}

<div></div>

ध्यान दें कि स्ट्रिंग इंटरपोलेशन सीएसएस गैर-सीएसएस कार्यों के लिए काम नहीं करेगा, जैसे कि lighten(), क्योंकि परिणामस्वरूप कोड कार्यात्मक सीएसएस नहीं होगा। यह अभी भी मान्य scss होगा, इसलिए आपको संकलन में कोई त्रुटि नहीं मिलेगी।

Comments

यदि आप अपनी Sass .scss फ़ाइलों में देशी CSS रंग फ़ंक्शंस का उपयोग करना पसंद करते हैं, तो आप Sass की हैंडलिंग को ओवरराइड करने और उन्हें पास करने के लिए अपनी फ़ाइल के शीर्ष पर निम्न फ़ंक्शन परिभाषाएँ शामिल कर सकते हैं: @function rgb($args...) { @return #{'rgb(#{$args})'}; } @function rgba($args...) { @return #{'rgba(#{$args})'}; } @function hsl($args...) { @return #{'hsl(#{$args})'}; } @function hsla($args...) { @return #{'hsla(#{$args})'}; }`` ``

— lunelson

rgbargbअभी कुछ समय के लिए एक पर्याय है .. इसलिए आपको "a" को छोड़ने की अनुमति है।

— s3c

स्कैस फ़ाइलों के लिए एक और समाधान अपरकेस ( RGB) का उपयोग करना है, जिसे तब sass द्वारा अनदेखा किया जाता है। उदाहरण के लिए: color: RGB(var(--color_rgb), 0.5);। से GitHub

— Jono नौकरी

Answer 3

मैं एक ऐसी ही स्थिति में था, लेकिन दुर्भाग्य से दिया समाधान मेरे लिए काम नहीं किया, चर से कुछ भी हो सकता के रूप में rgbकरने के लिए hslकरने के लिए hexया यहां तक कि रंग के नाम।
मैं अब इस समस्या हल हो जाती, लगाने से background-colorऔर opacityएक छद्म के लिए :afterया :beforeतत्व:

.container {
    position: relative;
}

.container:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background-color: var(--color);
    opacity: 0.3;
}

शैलियों को थोड़ा बदलने की आवश्यकता हो सकती है, तत्व के आधार पर पृष्ठभूमि को लागू किया जाना चाहिए।
इसके अलावा यह सभी स्थितियों के लिए काम नहीं कर सकता है, लेकिन उम्मीद है कि यह कुछ मामलों में मदद करता है, जहां अन्य समाधान का उपयोग नहीं किया जा सकता है।

संपादित करें: मैंने अभी देखा, कि यह समाधान स्पष्ट रूप से पाठ रंग को प्रभावित करता है, क्योंकि यह लक्ष्य तत्व के सामने एक तत्व बनाता है और इसके लिए एक पारदर्शी पृष्ठभूमि रंग लागू करता है।
यह कुछ मामलों में एक समस्या हो सकती है।

Comments

यह न केवल रंग के अधिक लचीले विनिर्देश (जैसे, एक नाम, या rgbया HSL) को अनुमति देने का लाभ है, बल्कि देशी सीएसएस रंग कार्यों और सास के रंग कार्यों के बीच किसी भी संघर्ष से बचा जाता है। देखें SimplyPhy का जवाब नीचे।

— जिम रेटलिफ

मुझे लगता है कि इसका उपयोग करना बेहतर है :beforeताकि आपको बिना खेले ही सही स्टैकिंग ऑर्डर मिल जाए z-index।

— मिकको रेंटालिनेन

Answer 4

यह सीएसएस के साथ वास्तव में संभव है । यह बस थोड़ा गंदा है, और आपको ग्रेडिएंट का उपयोग करना होगा। मैंने एक छोटे स्निपेट को उदाहरण के रूप में कोडित किया है, ध्यान दें कि अंधेरे पृष्ठभूमि के लिए, आपको काली अपारदर्शिता का उपयोग करना चाहिए, जैसे कि प्रकाश- सफेद वाले के लिए:

:root {
  --red: rgba(255, 0, 0, 1);
  --white-low-opacity: rgba(255, 255, 255, .3);
  --white-high-opacity: rgba(255, 255, 255, .7);
  --black-low-opacity: rgba(0, 0, 0, .3);
  --black-high-opacity: rgba(0, 0, 0, .7);
}

div {
	width: 100px;
	height: 100px;
	margin: 10px;
}
    
    
.element1 {
	background: 
        linear-gradient(var(--white-low-opacity), var(--white-low-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

.element2 {
	background: 
        linear-gradient(var(--white-high-opacity), var(--white-high-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}
    
.element3 {
	background: 
        linear-gradient(var(--black-low-opacity), var(--black-low-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

.element4 {
	background: 
        linear-gradient(var(--black-high-opacity), var(--black-high-opacity)) no-repeat,
	linear-gradient(var(--red), var(--red)) no-repeat;
}

<div class="element1">hello world</div>
<div class="element2">hello world</div>
<div class="element3">hello world</div>
<div class="element4">hello world</div>

Comments

आपको पृष्ठभूमि-आकार निर्दिष्ट करने की आवश्यकता नहीं है - ग्रेडिएंट का कोई आंतरिक आकार नहीं है और परिणामस्वरूप स्वचालित रूप से खिंचाव होगा।

— BoltClock

@BoltClock हाँ, मैंने शाब्दिक रूप से इसके बारे में सोचा था कि जब मैंने इसे पोस्ट किया था, तो यह सिंप्लीपेन में चारों ओर खेल रहा था;)। अब साफ हो गया, धन्यवाद!

— 13

यह चतुर है, मैंने पिछले साल इसी तरह के सवाल का जवाब देने पर एक-दूसरे पर ठोस रंग के ग्रेडिएंट बिछाने के बारे में नहीं सोचा था । यह प्रश्न संभवतः अधिक सामान्य है वैसे भी जिस तरह से लिखा गया था, मैंने जो उत्तर दिया वह बहुत विशिष्ट उपयोग के मामले के लिए था।

— BoltClock

यह वास्तव में तब काम नहीं करता है जब पृष्ठभूमि अलग होती है, मैं अब 'पवित्रता' लागू करते समय एक सफेद पृष्ठभूमि (255,255,255) का अनुमान लगाता हूं। यह संभवतः ओपी के मुख्य पृष्ठभूमि के रंग में डिफ़ॉल्ट हो सकता है। लेकिन तब फिर से, सफेद पृष्ठभूमि संभवतः सबसे हल्के रंगों की आवश्यकता को इस विस्तार तक फिट करेगी कि लोग इस पर ध्यान नहीं देंगे।

— रॉबरट्र-एस

मैंने अभी कुछ और खोजा है जो बहुत अविश्वसनीय है। मैंने अब एक उत्तर पोस्ट किया है।

— BoltClock

Answer 5

:root{
--color: 255, 0, 0;
}

#element{
    background-color: rgba(var(--color), opacity);
}

जहाँ आप अपारदर्शिता को 0 और 1 के बीच किसी भी चीज़ से बदलते हैं

Comments

क्या यह सवाल का जवाब देने का एक प्रयास है? क्योंकि यदि हां, तो कोड वास्तव में कोई मतलब नहीं है। विशेष रूप से rgba(var(--color), opacity)बिट। खासकर जब से आपके कस्टम प्रॉपर्टी वैल्यू पूरे आरजीबी () नोटेशन हैं। लेकिन "अस्पष्टता" कीवर्ड के कारण भी।

— BoltClock

woops मेरी खराब आरजीबी भागों को var में नहीं होना चाहिए

— पिज्जा लॉर्ड्स

Answer 6

एससीएसएस / एसएएस

फायदा: आप हर चैनल (0-255) के लिए 8 बिट का उपयोग करने के बजाय, केवल हेक्स रंग मान का उपयोग कर सकते हैं।

इस तरह से मैंने इसे प्रारंभिक विचार के साथ किया: https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables

संपादित करें: आप अल्फा फ़ंक्शन को केवल उपयोग करने के लिए #{$color-name}-rgbऔर उत्पन्न * -r, * -g, * -b सीएसएस चर को छोड़ सकते हैं।

---

परिणाम

body {
  --main-color: rgb(170, 68, 204);
  --main-color-rgb: 170,68,204;
  --main-color-r: 170;
  --main-color-g: 68;
  --main-color-b: 204;
}

.button-test {
  // Generated from the alpha function
  color: rgba(var(--main-color-r), var(--main-color-g), var(--main-color-b), 0.5);
  // OR (you wrote this yourself, see usage)
  color: rgba(var(--main-color-rgb), 0.5);
}

उपयोग:

body {
    @include defineColorRGB(--main-color, #aa44cc);
}

.button-test {
  // With alpha function:
  color: alpha(var(--main-color), 0.5);
  // OR just using the generated variable directly
  color: rgba(var(--main-color-rgb), 0.5);
}

मिश्रण और कार्य

@mixin defineColorRGB($color-name, $value) {
    $red: red($value);
    $green: green($value);
    $blue: blue($value);
    #{$color-name}: unquote("rgb(#{$red}, #{$green}, #{$blue})");
    #{$color-name}-rgb: $red,$green,$blue;
    #{$color-name}-r: $red;
    #{$color-name}-g: $green;
    #{$color-name}-b: $blue;
}

// replace substring with another string
// credits: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
    @return $string;
}

@function alpha($color, $opacity) {
    $color: str-replace($color, 'var(');
    $color: str-replace($color, ')');
    $color-r: var(#{$color+'-r'});
    $color-g: var(#{$color+'-g'});
    $color-b: var(#{$color+'-b'});
    @return rgba($color-r, $color-g, $color-b, $opacity);
}

उम्मीद है कि यह किसी को कुछ समय बचाएगा।

Comments

मुझे यह तरीका पसंद है। धन्यवाद

— tonygatta

Answer 7

आप प्रत्येक रंग के लिए विशिष्ट चर / मान निर्धारित कर सकते हैं - मूल और अस्पष्टता के साथ:

:root {
  --color: #F00;
  --color-opacity: rgba(255, 0, 0, 0.5);
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color-opacity);
}

<div id="a1">asdf</div>
<div id="a2">asdf</div>

यदि आप इसका उपयोग नहीं कर सकते हैं और आप जावास्क्रिप्ट समाधान के साथ ठीक हैं, तो आप इस का उपयोग कर सकते हैं:

$(function() {
  $('button').click(function() {
    bgcolor = $('#a2').css('backgroundColor');
    rgb_value = bgcolor.match(/\d+,\s?\d+,\s?\d+/)[0]
    $('#a2').css('backgroundColor', 'rgba(' + rgb_value + ', 0.5)');
  });
});

:root {
  --color: #F00;
}
#a1 {
  background: var(--color);
} 
#a2 {
  background: var(--color);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1">asdf</div>
<div id="a2">asdf</div>
<button>Click to change opacity</button>

Comments

अपारदर्शिता मूल्य बदल जाएगा, इसलिए यह हर अस्पष्टता के लिए एक चर बनाने के लिए कष्टप्रद होगा।

— जोशियोरोबोट

Answer 8

सामान्य सीएसएस चर के साथ आरजीबीए () का उपयोग करने के लिए, यह प्रयास करें:

1. अपने रंग को अंदर घोषित करें: जड़, लेकिन अन्य उत्तरों के रूप में आरजीबी () का उपयोग न करें। बस मूल्य लिखें

:root{
  --color : 255,0,0;
  }

2. अन्य उत्तरों के रूप में var () का उपयोग करके --color वैरिएबल का उपयोग करें

#some-element {
  color : rgba(var(--color),0.5);
}

Answer 9

CSS में आप या तो rgba मान का उपयोग करने में सक्षम होना चाहिए:

#element {
  background: rgba(240, 240, 240, 0.5);
}

या बस अस्पष्टता निर्धारित करें:

#element {
  background: #f0f0f0;
  opacity: 0.5;    
}

Comments

मैं एक rgba मान को हार्डकोड करने में असमर्थ हूं, मैं रंग चर का उपयोग कर रहा हूं। मुझे यह उल्लेख करना चाहिए कि मैं अस्पष्टता का उपयोग नहीं कर सकता क्योंकि मेरे पास एक पृष्ठभूमि छवि होगी जो पारदर्शी नहीं होनी चाहिए।

— जोशीरोबोट

यह समाधान बी / सी नहीं है यदि आप केवल बीजी की पारदर्शिता चाहते हैं लेकिन पूर्ण तत्व में अस्पष्टता है तो हर चीज में अपारदर्शिता जोड़ना सहायक है।

— लेविड्स

Answer 10

अगर तुम मेरे जैसे हेक्स रंगों से प्यार करते हो तो एक और उपाय है। अल्फा मान के बाद हेक्स मान 6 अंक है। 00 है 100% पारदर्शिता 99 लगभग 75% है तो यह 'ff' जो 100% अपारदर्शी है के साथ वर्णमाला 'a1-af' तो 'b1-bf' का उपयोग करता है।

:root {
--color: #F00;
}

#element {
background: var(--color)f6;
}

Comments

दुर्भाग्य से, मुझे नहीं लगता कि यह काम करता है। 8 अंकों का हेक्स कोड समर्थन फैलने लगा है, लेकिन यह उनके साथ स्वीकृत उत्तर कार्यों के साथ उपयोग किए गए ट्रिक की तरह नहीं दिखता है। उदाहरण: jsbin.com/nacuharige/edit?css,output

— JoshyRobot

यह काम नहीं करता है, हालांकि अगर यह किया जाता है तो यह एक महान समाधान होगा।

— ब्रैडेन रॉकवेल नेपियर