CSS3-এ ইমেজকে গ্রেস্কেল (কালো-সাদা) এ রূপান্তর করার জন্য filter প্রপার্টির grayscale() ফাংশন ব্যবহার করুন।
উদাহরণ: ১৩০% গ্রেস্কেল (সহ brightness এবং contrast)
<!DOCTYPE html> <html> <head> <style> img.demo { filter: brightness(120%); filter: contrast(120%); filter: grayscale(130%); } </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>Learn 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>
আউটপুট
grayscale() মান
- 0% / 0: মূল রঙিন ইমেজ (ডিফল্ট)
- 100% / 1: পুরোপুরি গ্রেস্কেল (কালো-সাদা)
- 0% থেকে 100%: আংশিক গ্রেস্কেল ইফেক্ট
- 100% এর বেশি: ১০০% এ ক্ল্যাম্প (clamp) হয়
সঠিক সিনট্যাক্স (একাধিক ফিল্টার):
img.demo { filter: brightness(120%) contrast(120%) grayscale(100%); }
ব্যবহার: হোভার ইফেক্ট, প্রিন্ট স্টাইলশিট, অ্যাক্সেসিবিলিটি (রঙ বিভেদযোগ্যতা পরীক্ষা), আর্টিস্টিক ইফেক্ট।
