CSS में पिक्चर को डिम कैसे करें

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

सीएसएस

CSS एक ऐसी भाषा है जिसे साइट डिजाइनर वेबपेजों पर वस्तुओं को देखने के तरीके को परिभाषित करने के लिए उपयोग करते हैं। इन विशेषताओं, जैसे रंग और अस्पष्टता, में निम्न उदाहरण में दिखाए गए मान हैं: .redBorder {सीमा-रंग: लाल; सीमा शैली: ठोस;}

यह कोड RedBorder नाम का CSS क्लास बनाता है। यदि आपका कोई HTML img टैग इस वर्ग का संदर्भ देता है, तो साइट विज़िटर आपके वेबपेज पर इसे देखते समय छवि के चारों ओर एक ठोस लाल बॉर्डर देखते हैं। HTML कोड जो इस वर्ग को संदर्भित करता है, वह निम्नानुसार है और लाल सीमा को इस img टैग में वर्ग संदर्भ हटाकर हटाया जा सकता है:

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

CSS का उपयोग करके एक छवि की अस्पष्टता को बदलकर, आप इसे मंद बनाते हैं। नीचे दिखाया गया कोड opacity40 नामक एक वर्ग बनाता है जो 40 प्रतिशत की अस्पष्टता मूल्यों को परिभाषित करता है: .opacity40 {फ़िल्टर: अल्फा (अपारदर्शिता = 40);

अपारदर्शिता: 0.4; }

क्लास की फ़िल्टर विशेषता 0 और 100 के बीच एक अपारदर्शिता पैमाने का उपयोग करती है, और इसकी अपारदर्शिता विशेषता में 0 से 1 तक के मानों के साथ एक अपारदर्शिता स्केल होता है। दोनों विशेषताओं का उपयोग यह सुनिश्चित करता है कि सभी ब्राउज़र आपकी छवि की अस्पष्टता को बदल सकते हैं। छवि को मंद बनाने के लिए इस वर्ग संदर्भ को जोड़ें। आप "opacity100" नामक एक वर्ग भी बना सकते हैं और इसके मान सेट कर सकते हैं ताकि छवि की अस्पष्टता 100 प्रतिशत हो। वह वर्ग छवि को अपारदर्शी बना देगा।

प्रोग्रामिंग रूप से Dimming

जब उपयोगकर्ता पृष्ठ खोलते हैं, तो आपका वेबपृष्ठ एक धुंधली तस्वीर प्रदर्शित कर सकता है, या आपका कोड पृष्ठ लोड होने के बाद छवि को मंद कर सकता है। शुरुआत में छवि को मंद बनाने के लिए, इसकी अस्पष्टता को कम मूल्य पर सेट करें, जैसा कि पहले वर्णित है। छवि को मंद करने के लिए जैसे ही आपका एप्लिकेशन चलता है, उस वर्ग का नाम बदलें जो छवि की अपारदर्शिता को परिभाषित करता है जैसा कि नीचे उदाहरण में दिखाया गया है: var imageObject = document.getElementById ("image1"); imageObject.className = "अस्पष्टता";

यह कोड, जावास्क्रिप्ट फ़ंक्शन के अंदर दिखाई देता है, छवि का एक संदर्भ प्राप्त करता है और इसका वर्ग नाम "opacity40" में बदल देता है। उपयोगकर्ता जावास्क्रिप्ट फ़ंक्शन को चलाने वाले बटन पर क्लिक कर सकते हैं, या आपका कोड इसे किसी भी समय कॉल कर सकता है।

विचार

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