फिल्टर ब्राइटनेस
CSS में इमेज ब्राइटनेस सेट करने के लिए filter: brightness(%) का उपयोग करें।
मानों की व्याख्या:
- 0%: इमेज पूरी तरह काली
- 100%: मूल इमेज (डिफ़ॉल्ट)
- 100% से अधिक: अधिक ब्राइट (उदाहरण: 200% = दोगुना ब्राइट)
- 100% से कम: गहरी/कम ब्राइट
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(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% ब्राइटनेस के साथ - मूल से 20% अधिक ब्राइट।
ब्राइटनेस vs एक्सपोजर:
brightness()सभी पिक्सेल्स को समान रूप से गुणा करता है- फोटोग्राफिक एक्सपोजर हाइलाइट्स/शैडोज को अलग तरह से व्यवहार करता है
- बहुत उच्च मान (>200%) डिटेल नष्ट कर सकते हैं (क्लिपिंग)
अन्य फिल्टर्स के साथ संयोजन:
img.enhanced {
filter: brightness(110%) contrast(120%) saturate(110%);
}
इंटरैक्टिव उदाहरण:
img {
filter: brightness(100%);
transition: filter 0.3s;
}
img:hover {
filter: brightness(130%);
}
उपयोग के मामले:
- कम रोशनी वाली फोटोज को ठीक करना
- होवर/फोकस हाइलाइट इफेक्ट
- डार्क मोड में इमेज एडजस्टमेंट
- थंबनेल पर "डिम" इफेक्ट
- लोडिंग प्लेसहोल्डर एनिमेशन
संबंधित फिल्टर्स:
contrast()- कंट्रास्ट एडजस्टexposure()- फोटोग्राफिक एक्सपोजर (नया, सीमित सपोर्ट)gamma()- गामा करेक्शन (नया)
