फिल्टर कंट्रास्ट() फंक्शन
CSS में इमेज कंट्रास्ट सेट करने के लिए filter: contrast(%) का उपयोग करें।
मानों की व्याख्या:
- 0%: इमेज पूरी तरह काली (ग्रेस्केल काला)
- 100%: मूल इमेज (डिफ़ॉल्ट)
- 100% से अधिक: अधिक कंट्रास्ट (गहरे रंग गहरे, चमकीले रंग चमकीले)
- 100% से कम: कम कंट्रास्ट (धुंधला/फीका प्रभाव)
उदाहरण
इमेज कंट्रास्ट और ब्राइटनेस बढ़ाना:
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
}
</style>
</head>
<body>
<h1>MySQL सीखें</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>MySQL सीखें</h1>
<p>नीचे की इमेज ऊपर की मूल इमेज से अधिक ब्राइट और अधिक कंट्रास्ट वाली है।</p>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
आउटपुट
दूसरी इमेज 120% ब्राइटनेस और 120% कंट्रास्ट के साथ दिखाई देगी।
सही सिंटैक्स (चेनिंग फिल्टर्स):
img.demo {
filter: brightness(120%) contrast(120%);
}
अन्य फिल्टर फंक्शन्स के साथ संयोजन:
img.enhanced {
filter: contrast(150%) brightness(110%) saturate(120%);
}
उपयोग के मामले:
- कम रोशनी वाली फोटोज को बेहतर बनाना
- होवर इफेक्ट्स के लिए इंटरैक्टिव कंट्रास्ट बदलाव
- प्रिंट स्टाइलशीट्स में बेहतर पठनीयता के लिए
- थीमिंग (डार्क/लाइट मोड एडजस्टमेंट्स)
ब्राउज़र सपोर्ट:
सभी आधुनिक ब्राउज़र्स में सपोर्टेड। वेंडर प्रीफिक्स (-webkit-filter) पुराने ब्राउज़र्स के लिए आवश्यक हो सकते हैं।
