CSS Properties: How to change the color of an images to black and white?
Solution:
HTML Code:
Explanation:
- This HTML document demonstrates how to change the color of an image to black and white using CSS.
- Comments are added to both HTML and CSS to explain each section of the code.
- The CSS <style> block defines a class named "greyScale", which applies a grayscale filter to the image.
- Two <img> elements are present, one displaying the original image and the other displaying the same image with the "greyScale" class applied, effectively converting it to grayscale.
- The grayscale filter is applied using both -webkit-filter and filter properties to ensure compatibility with different web browsers.
Live Demo:
See the solution in the browser
Supported browser
Yes | Yes | Yes | Yes | No |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics