CSS के फिल्टर प्रॉपर्टी में ग्रेस्केल वैल्यू निर्दिष्ट करके हम ब्लैक एंड व्हाइट इमेज बना सकते हैं। फिल्टर प्रॉपर्टी का उपयोग इमेज पर ब्लर, ड्रॉप-शैडो जैसे स्पेशल इफेक्ट लागू करने के लिए किया जा सकता है।
सिंटैक्स
CSS फिल्टर प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
Selector { filter: grayscale(100%); -webkit-filter: grayscale(100%); }
उदाहरण 1
निम्न उदाहरण CSS फिल्टर प्रॉपर्टी को दर्शाते हैं।
<!DOCTYPE html> <html> <head> <style> img { margin: 2%; border-radius: 25%; } img:nth-of-type(even) { filter: grayscale(100%); -webkit-filter: grayscale(100%); } </style> </head> <body> <img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="img from unsplash"> <img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="img from unsplash"> </body> </html>
इससे निम्न आउटपुट मिलता है:
उदाहरण 2 (ऑड इमेज पर)
<!DOCTYPE html> <html> <head> <style> img { margin: 2%; } img:nth-of-type(odd) { filter: grayscale(100%); -webkit-filter: grayscale(100%); } </style> </head> <body> <img src="https://images.unsplash.com/photo-1611781750917-8777ab68668a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256"> <img src="https://images.unsplash.com/photo-1611781750917-8777ab68668a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256"> </body> </html>
इससे निम्न आउटपुट मिलता है:
