CSS3 का उपयोग करके इमेज को ग्रेस्केल में बदलना

फिल्टर ग्रेस्केल

CSS3 में इमेज को ग्रेस्केल में बदलने के लिए, filter प्रॉपर्टी के लिए grayscale() मान का उपयोग करें।

सिंटैक्स:

filter: grayscale(percentage);

मान:

• 0%: मूल रंगीन इमेज (डिफ़ॉल्ट)
• 100%: पूरी तरह ग्रेस्केल (काला-सफेद)
• 0-100% के बीच: आंशिक ग्रेस्केल इफेक्ट
• 100% से अधिक: 100% पर क्लैम्प हो जाता है

उदाहरण

ब्राइटनेस, कंट्रास्ट और ग्रेस्केल संयुक्त:

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
  filter: brightness(120%) contrast(120%) grayscale(100%);
}
</style>
</head>
<body>
<h1>Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring" width="160" height="150">
<h1>MySQL सीखें</h1>
<p>नीचे की इमेज ऊपर की मूल इमेज से अधिक ब्राइट और अधिक कंट्रास्ट वाली है। साथ ही इमेज ग्रेस्केल में है:</p>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring" width="160" height="150">
</body>
</html>

आउटपुट

दूसरी इमेज: 120% ब्राइटनेस, 120% कंट्रास्ट, और 100% ग्रेस्केल (पूरी तरह काला-सफेद)।

सही फिल्टर चेनिंग:

/* सही - स्पेस सेपरेटेड */
filter: brightness(120%) contrast(120%) grayscale(100%);

/* गलत - प्रत्येक डिक्लेरेशन पिछले को ओवरराइड करता है */
filter: brightness(120%);
filter: contrast(120%);
filter: grayscale(100%);

ग्रेस्केल vs अन्य ब्लैक-व्हाइट मेथड्स:

उपयोग के मामले:

• ब्लैक-व्हाइट फोटोग्राफी इफेक्ट
• डिसेबल्ड/निष्क्रिय स्टेट इमेजेज
• प्रिंट स्टाइलशीट्स (रंग बचाने के लिए)
• होवर पर रंग प्रकट करना: img:hover { filter: grayscale(0%); }
• एक्सेसिबिलिटी: रंग-अंध उपयोगकर्ताओं के लिए कंट्रास्ट जांच

ट्रांजीशन के साथ:

img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
img:hover {
  filter: grayscale(0%);
}