- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Converting an Image to Grayscale using CSS3
To convert an image to Grayscale in CSS3, use the grayscale value for filter property.
Example
Let us see an example −
<!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>Below image is brighter and has more contrast than the original image above. With that the image is in grayscale:</p> <img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring" width="160" height="150"> </body> </html>
Output
Advertisements