पारदर्शी सीएसएस पृष्ठभूमि रंग

Question

मैं फ़ॉन्ट को प्रभावित किए बिना, अस्पष्टता का उपयोग करके सूची मेनू की पृष्ठभूमि को गायब करना चाहता हूं। क्या यह CSS3 के साथ संभव है?

Comments

हां यकीनन! आप इसे इस ट्रिक से कर सकते हैं: stackoverflow.com/a/15351192/366884 सौभाग्य

— Saud Alfadhli

Answer 1

अब आप इस तरह से CSS गुणों में rgba का उपयोग कर सकते हैं :

.class {
    background: rgba(0,0,0,0.5);
}

0.5 पारदर्शिता है , अपने डिजाइन के अनुसार मूल्यों को बदलें।

लाइव डेमो http://jsfiddle.net/EeAaB/

अधिक जानकारी http://css-tricks.com/rgba-browser-support/

Comments

धन्यवाद। लेकिन मैं फॉन्ट को प्रभावित किए बिना सूची मेनू में डिफ़ॉल्ट तीर निशान diappear करना चाहते हैं

— Saranya

क्या इस तरह से लिखने का कोई तरीका है rgba('black', 0.5)?

— phil294

Answer 2

इन तीन विकल्पों को ध्यान में रखें (आप # 3 चाहते हैं):

1) संपूर्ण तत्व पारदर्शी है:

visibility: hidden;

2) पूरा तत्व कुछ हद तक पारदर्शी है:

opacity: 0.0 - 1.0;

3) बस तत्व की पृष्ठभूमि पारदर्शी है:

background-color: transparent;

Answer 3

हाँ, संभव है। बस अपने पृष्ठभूमि-रंग के लिए आरजीबी-सिंटैक्स का उपयोग करें ।

.menue{
  background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}

Comments

नमस्ते! क्या आप aplha चैनल के साथ 'पृष्ठभूमि-रंग' CSS परिभाषा के बारे में कुछ जानते हैं, लेकिन रंग के लिए #HEX मान का उपयोग करके?

— पिओट्र स्टान्विस्की

@ PiotrSt Pipniewski शायद देर से, लेकिन अब ऐसा सिंटेक्स है ( मेरा उत्तर देखें )

— FZs

Answer 4

यहाँ CSS नाम रंगों का उपयोग करके एक उदाहरण वर्ग दिया गया है:

.semi-transparent {
  background: yellow;
  opacity: 0.25;
}

यह एक पृष्ठभूमि जोड़ता है जो 25% अपारदर्शी (रंगीन) और 75% पारदर्शी है।

CAVEAT दुर्भाग्य से, अपारदर्शिता तब पूरे तत्व को प्रभावित करेगी जो इससे जुड़ी है।
इसलिए यदि आपके पास उस तत्व में पाठ है, तो यह पाठ को 25% अस्पष्टता पर भी सेट करेगा। :-(

इसे प्राप्त करने का तरीका आपकी इच्छित पृष्ठभूमि "रंग" के भाग के रूप में पारदर्शिता को इंगित करने के लिए rgbaया hslaविधियों का उपयोग करना है । यह आपको पृष्ठभूमि पारदर्शिता निर्दिष्ट करने की अनुमति देता है, आपके तत्व में अन्य वस्तुओं की पारदर्शिता से स्वतंत्र है।

अन्य तत्वों को प्रभावित किए बिना 75% पारदर्शिता पर नीले रंग की पृष्ठभूमि सेट करने के 3 तरीके यहां दिए गए हैं:

• background: rgba(0%, 0%, 100%, 0.75)
• background: rgba(0, 0, 255, 0.75)
• background: hsla(240, 100%, 50%, 0.75)

Answer 5

इस मामले background-color:rgba(0,0,0,0.5);में सबसे अच्छा तरीका है। उदाहरण के लिए:background-color:rgba(0,0,0,opacity option);

Answer 6

इसे प्राप्त करने के लिए, आपको background-colorतत्व को संशोधित करना होगा ।

बनाने के तरीके (अर्ध) पारदर्शी रंग:

• CSS रंग नाम transparentपूरी तरह से पारदर्शी रंग बनाता है।

  उपयोग:

    .transparent{
      background-color: transparent;
    }
  

• रंग rgbaया hslaफ़ंक्शन का उपयोग करना , जो आपको अल्फा चैनल (अस्पष्टता) को rgbऔर hslफ़ंक्शंस में जोड़ने की अनुमति देता है। उनके अल्फा मान 0 - 1 से होते हैं।

  उपयोग:

    .semi-transparent-yellow{
      background-color: rgba(255, 255, 0, 0.5);
    }
    .transparent{
      background-color:  hsla(0, 0%, 0%, 0);
    }
  

• पहले से ही वर्णित समाधानों के अलावा, आप अल्फा वैल्यू ( #RRGGBBAAया #RGBAनोटेशन ) के साथ एचईएक्स प्रारूप का भी उपयोग कर सकते हैं ।

  यह बहुत नया है (सीएसएस रंग मॉड्यूल स्तर 4 द्वारा समाहित), लेकिन पहले से ही बड़े ब्राउज़रों में लागू किया गया (क्षमा करें, कोई IE)।

  यह अन्य समाधानों से भिन्न है, क्योंकि यह अल्फा चैनल (अपारदर्शिता) को एक हेक्साडेसिमल मान के रूप में मानता है, जिससे यह 0 - 255 ( FF) तक होता है।

  उपयोग:

    .semi-transparent-yellow{
      background-color: #FFFF0080;
    }
    .transparent{
      background-color: #0000;
    }
  

आप उन्हें भी आज़मा सकते हैं:

• transparent:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: transparent;
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `transparent`
</div>

• rgba():

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: rgba(0, 255, 0, 0.3);
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `rgba()`
</div>

• #RRGGBBAA:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: #FF000060
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `#RRGGBBAA`
</div>

Answer 7

इसे इस्तेमाल करे:

opacity:0;

IE8 और उससे पहले के लिए

filter:Alpha(opacity=0); 

W3Schools से अपारदर्शिता डेमो

Comments

जिस साइट को आप लिंक कर रहे हैं ... वह बहुत ही भयानक है।

— जॉन ड्वोरक

@ TheWandererr मैं पेज के लिंक के साथ शुरू करूँगा। ध्यान रखें कि यह अनुकरणीय कोड प्रदर्शित करने वाला है। और फिर भी ... कोई इंडेंटेशन नहीं है। कृपया ध्यान दें कि वे एचटीएमएल 5 सिद्धांत का उपयोग करते हैं, जिसका अर्थ है कि उन्होंने पृष्ठ को यहां लिंक किए जाने के बाद अपडेट किया था, या वे उम्मीदवार की सिफारिश की स्थिति में भी आधे साल पहले एचटीएमएल 5 का उपयोग करते थे। अगला: इनलाइन सीएसएस खराब है, कैशिंग के लिए और पठनीयता के लिए। वे थोड़े इसे यहाँ उपयोग करने के लिए है क्योंकि उनके पास पूरे पृष्ठ स्रोत के लिए केवल एक पैनल है, लेकिन अगर वे कई पैनल का उपयोग करते हैं, जैसे कि jsfiddle (2010) करता है। और अस्पष्टता का प्रदर्शन करने वाले एक पृष्ठ के लिए भी,

— जॉन

@ वेन्डरर वे और बेहतर कर सकते थे। नेस्टेड तत्वों पर प्रभाव दिखाते हुए या इसे अक्षम करने के लिए एक हॉवर कार्रवाई की अनुमति देकर। फिर वहाँ है कि पूरे "w3 consorcium होने का नाटक कर रहे हैं, और जब आपको पता चलता है कि आप एक और reskin या दो, भी w3something" के रूप में लेबल - थोड़े बेईमान अगर आप मुझसे पूछते हैं। वे यह भी कहते हैं कि उनके उदाहरणों को "पठनीयता के लिए सरल" और "लगातार समीक्षा" किया जा सकता है, लेकिन व्हाट्सएप को हटाने से पठनीयता में मदद नहीं मिलती है और IE7 समर्थन बिल्कुल नया चलन भी नहीं है। इसके अलावा, कौन कागज के एक टुकड़े के लिए $ 100 का भुगतान नहीं करेगा जो उनकी विश्वसनीयता को नुकसान पहुंचाता है?

— जॉन ड्वोरक

@ वेन्डरेर IIRC, वे परीक्षण का पूर्वावलोकन करते थे। प्रश्न सामान्य ज्ञान और प्रवेश स्तर के सामान का मिश्रण थे। उनके कुछ जवाब हल्के से गलत भी हो सकते हैं। उनके सीएसएस ट्यूटोरियल के अस्पष्टता भाग के लिए: छवियों को पारदर्शी बनाने के लिए समर्पित तीन हेडर - वे केवल सीएसएस चयनकर्ता को बदलते हैं। फिर दो और पैराग्राफ - एक आरजीबीए (अंत में केवल पृष्ठभूमि पारदर्शी है) और एक को "एकीकरण उदाहरण" (या!, कोई इंडेंटेशन) के रूप में पेश करने के लिए। फिर ... यह बात है। अपारदर्शिता के बारे में अधिक कुछ नहीं है। और नहीं, बाद में कोई "उन्नत अस्पष्टता" विषय भी नहीं है।

— जॉन डेवोरक

@Wandererr जावास्क्रिप्ट के बारे में बात करते हैं: उनके सभी उदाहरणों में शामिल हैं: कोई इंडेंटेशन (जावास्क्रिप्ट कोड में भी); innerHTML =(हे, कम से कम यह अलर्ट से बेहतर है और document.writeवे 2012 में करते थे, लेकिन अभी भी कोई डोम हेरफेर नहीं है, jQuery ट्यूटोरियल के बाहर ट्यूटोरियल के बिट को छोड़कर जहां वे संबंधित विधियों को प्रति अध्याय एक सूची देते हैं, और फिर भी यह सिर्फ विभाजन है - और हाँ, वे सूची करते हैं document.write)। उनका एक्सएचआर ट्यूटोरियल ओनलॉड (आईई 7 के बाद से समर्थित) के बजाय रेडीस्टेटचेंज का उपयोग करता है। ओह और JSON में कार्यों के लिए उनका समाधान? उन्हें स्ट्रिंग बाद में eval'd होना चाहिए

— जॉन Dvorak

Answer 8

हाँ, आप बस के रूप में सादा पाठ कर सकते हैं

.someDive{
    background:transparent 
}