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




css3 colors (8)

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

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

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

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

:root {
  --color: #f0f0f0;
}

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

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

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

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


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

.container {
    position: relative;
}

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

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


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

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

:root {
--color: #F00;
}

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

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

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


मुझे पता है कि ओपी एक प्रीप्रोसेसर का उपयोग नहीं कर रहा है, लेकिन मुझे मदद मिलेगी यदि निम्नलिखित जानकारी यहां जवाब का हिस्सा होती (मैं अभी तक टिप्पणी नहीं कर सकता, अन्यथा मैंने @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 होगा, इसलिए आपको संकलन में कोई त्रुटि नहीं मिलेगी।


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

: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>


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

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

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

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

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

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

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

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

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

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

#element {
  background-color: rgba(var(--color), 0.5);
}
<p id="element">If you can see this, your browser supports custom properties.</p>

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

जादू इस तथ्य में निहित है कि कस्टम गुणों के मूल्यों को प्रतिस्थापित किया जाता है, जब संपत्ति के मूल्य में var() संदर्भों की जगह होती है, इससे पहले कि संपत्ति का मूल्य गणना की जाती है। इसका मतलब यह है कि जहां तक ​​कस्टम गुणों का संबंध है, आपके उदाहरण में --color का मूल्य तब तक रंग मूल्य नहीं है जब तक कि एक 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.5);
}

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

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

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

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

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

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

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

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

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





css-variables