जब आप वेबसाइट डिज़ाइन कर रहे होते हैं, तो आप तय कर सकते हैं कि आप चाहते हैं कि वेब पेज पर कोई एलिमेंट अन्य एलिमेंट्स की तुलना में अधिक पारदर्शी दिखाई दे। उदाहरण के लिए, आप कई इमेजेज वाले वेब पेज को डिज़ाइन कर रहे होंगे जिन्हें आप कुछ हद तक पारदर्शी दिखाना चाहते हैं।
यहीं CSS opacity प्रॉपर्टी काम आती है। CSS opacity प्रॉपर्टी का उपयोग वेब एलिमेंट की पारदर्शिता निर्दिष्ट करने के लिए किया जाता है।
यह ट्यूटोरियल, उदाहरणों के संदर्भ में, चर्चा करेगा कि वेब पेज पर एलिमेंट्स को पारदर्शी बनाने के लिए opacity प्रॉपर्टी का उपयोग कैसे करें। इस ट्यूटोरियल को पढ़ने के अंत तक, आप CSS में opacity प्रॉपर्टी के साथ काम करने में एक्सपर्ट होंगे।
CSS Opacity प्रॉपर्टी
CSS opacity प्रॉपर्टी एलिमेंट्स को सी-थ्रू या पारदर्शी बनाती है।
opacity प्रॉपर्टी का मान 0 और 1 के बीच होता है। opacity प्रॉपर्टी का मान जितना कम होगा, एलिमेंट उतना ही अधिक पारदर्शी दिखाई देगा। तो, 0 का मान एलिमेंट को पूरी तरह से अपारदर्शी या पूरी तरह से पारदर्शी बना देगा, और 1 का मान एलिमेंट को सामान्य रूप से दिखाएगा।
यहां CSS opacity प्रॉपर्टी का सिंटैक्स है:
img { opacity: 0.5; }
उपरोक्त उदाहरण वेब पेज पर किसी भी img एलिमेंट की opacity को 0.5 के बराबर सेट करेगा। इसका मतलब है कि सभी इमेजेज डिफ़ॉल्ट की तुलना में 50% अधिक पारदर्शी दिखाई देंगी।
opacity प्रॉपर्टी पैरेंट एलिमेंट और पैरेंट में मौजूद किसी भी चाइल्ड एलिमेंट दोनों पर लागू होती है। इसका मतलब है कि यदि आप टेक्स्ट शामिल करने वाले बॉक्स पर opacity प्रॉपर्टी लागू करते हैं, तो बॉक्स और टेक्स्ट दोनों अपारदर्शी हो जाएंगे।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी टेक जॉब संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही बूटकैंप से मैच करवाएं।
औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी ढूंढने तक।
अब जब हमने opacity प्रॉपर्टी के सिंटैक्स पर चर्चा कर ली है, तो हम इस प्रॉपर्टी को एक्शन में उपयोग करने के कुछ उदाहरणों के माध्यम से चल सकते हैं।
पारदर्शी इमेज बनाना
मान लें आप एक वेबसाइट डिज़ाइन कर रहे हैं जहां आप चाहते हैं कि एक इमेज पारदर्शी दिखाई दे। आप CSS opacity प्रॉपर्टी का उपयोग करके इस लक्ष्य को पूरा कर सकते हैं।
यहां opacity का उपयोग करके इमेज को 0.7 opacity पर सेट करने का एक उदाहरण है (जो इमेज को 70% अपारदर्शी बनाता है):
img { opacity: 0.7; }
हमारा कोड लौटाता है:
बाईं ओर, हमने बिना किसी opacity वैल्यू सेट के इमेज बनाई है। इसका मतलब है कि इमेज पारदर्शी नहीं है। दाईं ओर, हमने इमेज बनाई और इसकी opacity वैल्यू को 0.7 पर सेट किया। परिणामस्वरूप, दाईं ओर की इमेज बाईं ओर की तुलना में अधिक पारदर्शी है।
होवर पर Opacity ट्रिगर करें
जब आप opacity प्रॉपर्टी के साथ काम कर रहे होते हैं, तो आप तय कर सकते हैं कि आप चाहते हैं कि इमेज यूजर द्वारा इमेज पर होवर करने पर अधिक या कम अपारदर्शी दिखाई दे।
:hover CSS सेलेक्टर का उपयोग opacity लेवल एट्रिब्यूट के साथ संयोजन में किया जा सकता है ताकि इमेज के पारदर्शिता के स्तर को बदला जा सके जब यूजर इमेज पर होवर करता है।
मान लें हम चाहते हैं कि हमारी इमेजेज डिफ़ॉल्ट रूप से 50% पारदर्शी हों (या, दूसरे शब्दों में, 0.5 opacity वैल्यू हो)। हम यह भी चाहते हैं कि opacity का मान 1 पर सेट हो जब यूजर हमारी इमेज पर होवर करता है। हम निम्न कोड का उपयोग करके इस कार्य को पूरा कर सकते हैं:
.img { opacity: 0.5; } .img:hover { opacity: 1; }
हमारे कोड का परिणाम यहां है:
बाईं ओर, आप हमारे एलिमेंट का एक उदाहरण देख सकते हैं जब यूजर अपने कर्सर से एलिमेंट पर होवर कर रहा है। दाईं ओर, आप देख सकते हैं कि हमारी इमेज कैसी दिखाई देती है जब यूजर अपने कर्सर से एलिमेंट पर होवर नहीं कर रहा है।
डिफ़ॉल्ट रूप से, हमारी इमेज 50% पारदर्शी है, लेकिन जब यूजर इमेज पर होवर करता है, तो हमारी इमेज की opacity 1 पर सेट हो जाती है और हमारी इमेज पूरी तरह से दृश्यमान हो जाती है।
पारदर्शी बॉक्सेस
opacity एलिमेंट का उपयोग CSS में बॉक्स को पारदर्शी बनाने के लिए भी किया जा सकता है।
जब आप किसी एलिमेंट को पारदर्शी बनाने के लिए opacity प्रॉपर्टी का उपयोग करते हैं, तो उस एलिमेंट के भीतर हर एलिमेंट भी आपके द्वारा निर्दिष्ट opacity को साझा करेगा।
मान लें हमारे पास दो <div> एलिमेंट्स हैं, जो हमारे वेब पेज पर बॉक्स बनाते हैं। हम इन <div> एलिमेंट्स में से एक को सामान्य रूप से दिखाना चाहते हैं, और दूसरे को 50% पारदर्शी दिखाना चाहते हैं। हम इस कार्य को पूरा करने के लिए निम्न कोड का उपयोग कर सकते हैं:
.div1 { background-color: #B5651D; opacity: 0.5; text-align: center; padding: 20px; color: black; }
हमारा कोड लौटाता है:
इस उदाहरण में, हमने दो बॉक्स बनाए हैं। शीर्ष बॉक्स में नीचे वाले बॉक्स के समान स्टाइल्स हैं, लेकिन कोई opacity वैल्यू निर्दिष्ट नहीं है। नीचे वाले बॉक्स में 0.5 की opacity वैल्यू सेट है, जिसका मतलब है कि बॉक्स 50% पारदर्शी दिखाई देता है।
जैसा कि आप देख सकते हैं, हमारे नीचे वाले बॉक्स में टेक्स्ट भी अधिक अपारदर्शी है। ऐसा इसलिए है क्योंकि <div> बॉक्स के अंदर सभी एलिमेंट्स हमारे द्वारा निर्दिष्ट पारदर्शिता मान को विरासत में लेते हैं।
RGBA कलर ट्रांसपेरेंसी
उपरोक्त उदाहरणों में, हमने एलिमेंट्स को अधिक और कम अपारदर्शी बनाने के लिए opacity प्रॉपर्टी का उपयोग किया है। हालांकि, एक और दृष्टिकोण है जिसका उपयोग आप एलिमेंट को पारदर्शी बनाने के लिए कर सकते हैं: एलिमेंट का बैकग्राउंड कलर RGBA कलर वैल्यूज़ का उपयोग करके सेट करें।
जब आप कलर्स के साथ काम कर रहे होते हैं, तो आप अक्सर कलर वैल्यू निर्दिष्ट करने के लिए RGB का उपयोग करेंगे। RGB का उपयोग करने के अलावा, आप अल्फा वैल्यू (RGBA) भी निर्दिष्ट कर सकते हैं, जो आपके द्वारा निर्दिष्ट कलर की opacity सेट करता है।
यह दृष्टिकोण उपयोगी है क्योंकि यह आपको एलिमेंट के बैकग्राउंड कलर के लिए opacity सेट करने की अनुमति देता है, जिसे उस एलिमेंट के भीतर किसी भी एलिमेंट पर लागू नहीं किया जाएगा जिसे अधिक पारदर्शी बनाया गया है। यह opacity एट्रिब्यूट के विपरीत है, जिसे उस एलिमेंट के भीतर सभी एलिमेंट्स पर लागू किया जाता है जहां opacity वैल्यू निर्दिष्ट की गई है।
आइए पहले के हमारे ब्राउन बॉक्स उदाहरण को लें। यदि हम अपने बॉक्स को 70% पारदर्शी बनाना चाहते हैं, लेकिन बॉक्स के अंदर का टेक्स्ट नहीं, तो हम निम्न कोड का उपयोग कर सकते हैं:
.div1 { text-align: center; padding: 20px; color: black; background: rgba(181, 101, 29, 0.3); }
हमारा कोड लौटाता है:
हमारे कोड में निर्दिष्ट opacity वैल्यू 0.3 है। ऐसा इसलिए है क्योंकि opacity जितनी कम होगी, एलिमेंट उतना ही अधिक पारदर्शी दिखाई देगा, और 0.3 opacity का मतलब है कि एलिमेंट 70% पारदर्शी होगा। हमने इस उदाहरण में अपने टेक्स्ट का कलर भी ब्लैक सेट किया है।
शीर्ष बॉक्स बिना किसी opacity के हमारे <div> का उदाहरण है। नीचे वाला बॉक्स इसकी opacity को 0.3 पर सेट करने के लिए rgba() वैल्यू का उपयोग करता है। जैसा कि आप देख सकते हैं, हमारा नीचे वाला बॉक्स शीर्ष बॉक्स की तुलना में काफी अधिक पारदर्शी है।
हालांकि, हमारे बॉक्स की सामग्री - टेक्स्ट This is a box - कोई अधिक पारदर्शी नहीं है। ऐसा इसलिए है क्योंकि हमने बॉक्स के बैकग्राउंड कलर को पारदर्शी सेट किया है।
निष्कर्ष
CSS opacity प्रॉपर्टी का उपयोग वेब पेज पर एलिमेंट की पारदर्शिता सेट करने के लिए किया जाता है।
इस ट्यूटोरियल ने उदाहरणों के संदर्भ में चर्चा की कि इमेज और बॉक्स की opacity बदलने के लिए opacity एट्रिब्यूट का उपयोग कैसे करें। इस ट्यूटोरियल ने यह भी पता लगाया कि CSS में पारदर्शी प्रभाव बनाने के लिए RGBA कलर्स का उपयोग कैसे किया जा सकता है। अब आप प्रो की तरह opacity एट्रिब्यूट के साथ काम करने के लिए ज्ञान से लैस हैं!
