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




css3 colors (6)

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

:root {
  --color: #f0f0f0;
}

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

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

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

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


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

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

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

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

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

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

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

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


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


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

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

:root {
--color: #F00;
}

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

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

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






css-variables