सीएसएस अस्पष्टता

जब आप एक वेबसाइट डिजाइन कर रहे हों, तो आप यह तय कर सकते हैं कि आप चाहते हैं कि वेब पेज पर एक तत्व अन्य तत्वों की तुलना में अधिक पारदर्शी दिखाई दे। उदाहरण के लिए, आप कई छवियों के साथ एक वेब पेज डिजाइन कर रहे हैं जिसे आप कुछ हद तक पारदर्शी दिखाना चाहते हैं।

यह वह जगह है जहां सीएसएस अस्पष्टता संपत्ति आती है। सीएसएस अस्पष्टता संपत्ति का उपयोग वेब तत्व की पारदर्शिता को निर्दिष्ट करने के लिए किया जाता है।

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

सीएसएस अस्पष्टता संपत्ति

CSS अपारदर्शिता गुण तत्वों को प्रत्यक्ष या पारदर्शी बनाता है।

अपारदर्शिता गुण का मान 0 और 1 के बीच होता है। अपारदर्शिता गुण का मान जितना कम होगा, तत्व उतना ही अधिक पारदर्शी दिखाई देगा। तो, 0 का मान एक तत्व को पूरी तरह से अपारदर्शी या पूरी तरह से पारदर्शी बना देगा, और 1 का मान एक तत्व को सामान्य रूप में प्रदर्शित करेगा।

यहाँ CSS अस्पष्टता गुण के लिए वाक्य रचना है:

img { अस्पष्टता:0.5; } 

 उपरोक्त उदाहरण किसी भी img . की अस्पष्टता निर्धारित करेगा वेब पेज पर तत्वों का 0.5 के बराबर होना। इसका मतलब है कि सभी छवियां डिफ़ॉल्ट रूप से 50% अधिक पारदर्शी दिखाई देंगी। 
 
 

 अस्पष्टता गुण मूल तत्व और माता-पिता के किसी भी बाल तत्व दोनों पर लागू होता है। इसका अर्थ यह है कि यदि आप उस बॉक्स में अस्पष्टता गुण लागू करते हैं जिसमें टेक्स्ट शामिल है, तो बॉक्स और टेक्स्ट दोनों अपारदर्शी हो जाएंगे। 
 
 

 81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
 

 बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
 

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

 मान लीजिए कि आप एक ऐसी वेबसाइट डिजाइन कर रहे हैं, जहां आप चाहते हैं कि एक छवि पारदर्शी दिखे। आप अपारदर्शिता CSS संपत्ति का उपयोग करके इस लक्ष्य को प्राप्त कर सकते हैं। 
 
 

 छवि को 0.7 अपारदर्शिता पर सेट करने के लिए उपयोग की जा रही अस्पष्टता का एक उदाहरण यहां दिया गया है (जो छवि को 70% अपारदर्शी बनाता है):
 
img { अस्पष्टता:0.7;}
 

 हमारा कोड लौटाता है:
 
  

 बाईं ओर, हमने एक छवि बनाई है जिसमें कोई अस्पष्टता मान सेट नहीं है। इसका मतलब है कि छवि पारदर्शी नहीं है। दाईं ओर, हमने एक छवि बनाई है और इसकी अस्पष्टता मान को 0.7 पर सेट किया है। परिणामस्वरूप, बाईं ओर की छवि की तुलना में दाईं ओर की छवि अधिक पारदर्शी होती है।
 
होवर पर अस्पष्टता ट्रिगर करें
 

 जब आप अपारदर्शिता गुण के साथ काम कर रहे होते हैं, तो आप यह तय कर सकते हैं कि जब उपयोगकर्ता छवि पर होवर करता है तो आप छवि को कम या ज्यादा अपारदर्शी दिखाना चाहते हैं। 
 
 

 जब उपयोगकर्ता छवि पर होवर करता है तो छवि में पारदर्शिता के स्तर को बदलने के लिए :hover CSS चयनकर्ता का उपयोग अस्पष्टता स्तर विशेषता के संयोजन में किया जा सकता है। 
 
 

 मान लीजिए कि हम चाहते हैं कि हमारी छवियां डिफ़ॉल्ट रूप से 50% पारदर्शी हों (या, दूसरे शब्दों में, 0.5 अपारदर्शिता मान हों)। जब उपयोगकर्ता हमारी छवि पर होवर करता है तो हम अस्पष्टता का मान 1 पर सेट करना चाहते हैं। हम निम्नलिखित कोड का उपयोग करके इस कार्य को पूरा कर सकते हैं:
 
.img { अस्पष्टता:0.5;}.img:hover { अस्पष्टता:1;}
 

 यहाँ हमारे कोड का परिणाम है:
 
  

 बाईं ओर, आप हमारी छवि का एक उदाहरण देख सकते हैं जब उपयोगकर्ता अपने कर्सर के साथ तत्व पर मँडरा रहा होता है। दाईं ओर, आप देख सकते हैं कि जब उपयोगकर्ता अपने कर्सर के साथ तत्व पर होवर नहीं कर रहा है तो हमारी छवि कैसी दिखाई देती है। 
 
 

 डिफ़ॉल्ट रूप से, हमारी छवि 50% पारदर्शी होती है, लेकिन जब कोई उपयोगकर्ता छवि पर होवर करता है, तो हमारी छवि की अस्पष्टता 1 पर सेट हो जाती है और हमारी छवि पूरी तरह से दिखाई देने लगती है।
 
पारदर्शी बॉक्स
 

 CSS में बॉक्स को पारदर्शी बनाने के लिए अपारदर्शिता तत्व का भी उपयोग किया जा सकता है।
 

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

 मान लीजिए हमारे पास दो 
 तत्व हैं, जो हमारे वेब पेज पर बॉक्स बनाते हैं। हम चाहते हैं कि इनमें से एक 
 तत्व सामान्य दिखाई दे, और दूसरा 50% पारदर्शी दिखाई दे। हम इस कार्य को पूरा करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:
 
.div1 {पृष्ठभूमि-रंग:#B5651D; अस्पष्टता:0.5; पाठ-संरेखण:केंद्र; पैडिंग:20 पीएक्स; रंग:काला;}
 

 हमारा कोड लौटाता है:
 
  

 इस उदाहरण में, हमने दो बॉक्स बनाए हैं। शीर्ष बॉक्स में निचले बॉक्स के समान शैलियाँ हैं, लेकिन कोई अस्पष्टता मान निर्दिष्ट नहीं है। बॉटम बॉक्स का अपारदर्शिता मान 0.5 सेट है, जिसका अर्थ है कि बॉक्स 50% पारदर्शी दिखाई देता है। 
 
 

 जैसा कि आप देख सकते हैं, हमारे बॉटम बॉक्स में टेक्स्ट भी अधिक अपारदर्शी है। ऐसा इसलिए है क्योंकि 
 बॉक्स के अंदर के सभी तत्व हमारे द्वारा निर्दिष्ट पारदर्शिता मान को प्राप्त करते हैं। 
 

 
आरजीबीए रंग पारदर्शिता
 

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

 जब आप रंगों के साथ काम कर रहे होते हैं, तो आप रंग मान निर्दिष्ट करने के लिए अक्सर RGB का उपयोग करते हैं। RGB का उपयोग करने के अलावा, आप एक अल्फ़ा मान (RGBA) भी निर्दिष्ट कर सकते हैं, जो आपके द्वारा निर्दिष्ट रंग की अस्पष्टता को सेट करता है। 
 
 

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

 आइए पहले से हमारे ब्राउन बॉक्स का उदाहरण लें। यदि हम अपने बॉक्स को 70% पारदर्शी बनाना चाहते हैं, लेकिन बॉक्स के अंदर के टेक्स्ट को नहीं, तो हम निम्नलिखित कोड का उपयोग कर सकते हैं:
 
.div1 { टेक्स्ट-एलाइन:सेंटर; पैडिंग:20 पीएक्स; रंग काला; पृष्ठभूमि:आरजीबीए(181, 101, 29, 0.3);}
 

 हमारा कोड लौटाता है:
 
  

 हमारे कोड में निर्दिष्ट अस्पष्टता मान 0.3 है। ऐसा इसलिए है क्योंकि अपारदर्शिता जितनी कम होगी, एक तत्व उतना ही अधिक पारदर्शी दिखाई देगा, और 0.3 अपारदर्शिता का अर्थ है कि तत्व 70% पारदर्शी होगा। हमने इस उदाहरण में अपने टेक्स्ट का रंग भी काला होना तय किया है। 
 
 

 शीर्ष बॉक्स बिना किसी अस्पष्टता के हमारे 
 का एक उदाहरण है। निचला बॉक्स rgba() का उपयोग करता है इसकी अस्पष्टता को 0.3 पर सेट करने के लिए मान। जैसा कि आप देख सकते हैं, हमारा निचला बॉक्स शीर्ष बॉक्स की तुलना में काफी अधिक पारदर्शी है। 
 

 

 हालांकि, हमारे बॉक्स की सामग्री—पाठ This is a box .—अब और पारदर्शी नहीं है। ऐसा इसलिए है क्योंकि हमने बॉक्स की पृष्ठभूमि का रंग पारदर्शी होने के लिए सेट किया है। 
 
 
निष्कर्ष
 

 CSS अपारदर्शिता गुण का उपयोग वेब पेज पर किसी तत्व की पारदर्शिता को सेट करने के लिए किया जाता है। 
 
 

 इस ट्यूटोरियल में उदाहरणों के संदर्भ में चर्चा की गई है कि किसी छवि और बॉक्स की अस्पष्टता को बदलने के लिए अपारदर्शिता विशेषता का उपयोग कैसे करें। इस ट्यूटोरियल ने यह भी पता लगाया कि CSS में पारदर्शी प्रभाव बनाने के लिए RGBA रंगों का उपयोग कैसे किया जा सकता है। अब आप उस ज्ञान से लैस हैं जो आपको एक पेशेवर की तरह अस्पष्टता विशेषता के साथ काम करना शुरू करने के लिए चाहिए!