यहाँ इस लेख के परिणाम हैं:
चलो शुरू करते हैं!
CSS में इमेज का रंग बदलें
CSS में इमेज का रंग बदलने के लिए, पहले फ़िल्टर गुण और उसके कार्यों के बारे में जानें। आप इस तरह से बेहतर समझ हासिल करेंगे।
फ़िल्टर सीएसएस संपत्ति
छवि फ़िल्टर के दृश्य प्रभाव को नियंत्रित करने के लिए CSS की संपत्ति का उपयोग किया जाता है। दृश्य प्रभाव हैं:
- कलंक
- चमक
- रंग समायोजन
- परछाई डालना
- अस्पष्टता
फ़िल्टर गुण का सिंटैक्स
फ़िल्टर गुण का सिंटैक्स है:
फिल्टर : कलंक ( ) | परछाई डालना ( ) | अस्पष्टता ( )- धुंधला (): छवि पर धुंधला प्रभाव लागू करने के लिए उपयोग किया जाता है।
- परछाई डालना(): एक छवि पर एक छाया बनाएँ।
- अस्पष्टता (): छवि में पारदर्शिता जोड़ने के लिए उपयोग किया जाता है।
हम इस फ़िल्टर गुण का उपयोग करके कई फ़िल्टर का उपयोग कर सकते हैं। यह लेख छवि के रंग को बदलने के तरीके के बारे में है, इसलिए यहां हम बताएंगे कि इसके साथ ड्रॉप-शैडो (), और अपारदर्शिता () फ़ंक्शन का उपयोग कैसे करें।
परछाई डालना()
ड्रॉप-शैडो () CSS का एक बिल्ट-इन फंक्शन है जो किसी भी एलिमेंट या इमेज पर शैडो सेट करने की अनुमति देता है। किसी छवि का रंग बदलने के लिए ड्रॉप-शैडो () फ़ंक्शन में निम्नलिखित मापदंडों का उपयोग किया जाता है:
- ऑफसेट-एक्स: इसका उपयोग क्षैतिज छाया जोड़ने के लिए किया जाता है।
- ऑफसेट-वाई: इसका उपयोग करके छाया को लंबवत रूप से जोड़ा जाता है।
- रंग: इस पैरामीटर के साथ छाया रंगीन हैं।
इन बिंदुओं को स्पष्ट करने के लिए, ड्रॉप-शैडो के सिंटैक्स पर चलते हैं:
परछाई डालना ( ऑफ़सेट-एक्स ऑफ़सेट-वाई रंग )- ऑफसेट-एक्स और ऑफसेट-वाई सकारात्मक या नकारात्मक हो सकते हैं।
- क्षैतिज में, सकारात्मक मान का उपयोग दाईं ओर प्रभाव जोड़ने के लिए किया जाता है, और नकारात्मक बाईं ओर के लिए होता है।
- ऊर्ध्वाधर में, धनात्मक मान नीचे की ओर के लिए होता है, और ऋणात्मक मान शीर्ष के लिए होता है।
- रंग के स्थान पर, आप कोई भी रंग निर्दिष्ट कर सकते हैं जो आप छवि को देना चाहते हैं।
अस्पष्टता ()
अस्पष्टता () का उपयोग किसी तत्व या किसी छवि में पारदर्शिता जोड़ने के लिए किया जाता है। अस्पष्टता () का सिंटैक्स है:
अस्पष्टता ( संख्या ) ;यहां ' संख्या ' मैं s 0.0 से 1.0 के बीच अस्पष्टता स्तर सेट करने के लिए प्रयोग किया जाता है। एक छवि को पूरी तरह से पारदर्शी बनाने के लिए, आप इसे 0.0 के रूप में सेट कर सकते हैं।
उपर्युक्त बिंदुओं को स्पष्ट करने के लिए, आइए उदाहरण पर चलते हैं।
CSS में इमेज का रंग कैसे बदलें?
नीचे दिए गए उदाहरण में, सबसे पहले, हम टैग का उपयोग करके एक इमेज जोड़ेंगे:
< आईएमजी कक्षा = 'छवि' एसआरसी = 'इमेज.जेपीजी' हर चीज़ = '' >
< / तन >
फ़िल्टर गुण लागू करने से पहले, परिणाम इस प्रकार था:
किसी छवि का रंग बदलने के लिए, आइए CSS पर जाएँ और उस पर फ़िल्टर गुण लागू करें। हम छवि की पारदर्शिता के लिए अपारदर्शिता को 0.5 पर सेट करेंगे। ड्रॉप-शैडो () फ़ंक्शन में, ऑफ़सेट-एक्स और ऑफ़सेट-वाई का मान 0 है क्योंकि हम केवल एक छवि का रंग बदलना चाहते हैं।
।छवि {फिल्टर : अस्पष्टता ( 0.5 ) परछाई डालना ( 0 0 भूरा ) ;
}
कार्यान्वयन के बाद अंतिम परिणाम यहां दिया गया है:
छवि का रंग सफलतापूर्वक बदल दिया गया है।
निष्कर्ष
एक छवि के रंग को संशोधित करने के लिए, दो सीएसएस फ़ंक्शन: अस्पष्टता () और ड्रॉप-शैडो () का उपयोग फ़िल्टर संपत्ति के साथ किया जाता है। अस्पष्टता () छवि की पारदर्शिता को निर्दिष्ट करती है और ड्रॉप-शैडो () छवि को रंग और छाया प्रदान करती है। इस राइट-अप ने CSS का उपयोग करके किसी छवि का रंग बदलने की विधि को समझाया।