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
How to change the color of an image to black and white using CSS?
To change the color of an image to black and white using CSS, is a simple process that can be done using various approaches. In this article, we will learn and understand two different methods for changing an image to black and white using CSS.
We are having an image in this article, our task is to change the color of image to black and white using CSS
Approaches to Change Color of Image to Black and white
Here is a list of approaches to change the color of an image to black and white using CSS with step wise explaination and complete example codes.
Using the grayscale filter
To change the color of an image to black and white, we have used grayscale filter.
- The grayscale filter accepts value between 0%-100%.
- The filter value 0% indicates that the image should be in full color and 100% indicating that the image should be completely black and white.
- We have used "filter: grayscale(100%);" filter, which change the image to black and white.
Example
In this example, we have implemented above mentioned step to changes the image color to black and white.
<html>
<head>
<title>
Changing color of image in css using a "grayscale" filter
</title>
<style>
body {
text-align: center;
}
.img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
</style>
</head>
<body>
<h3>
Change the color of an image to black
and white using CSS
</h3>
<p>
In this example we have used grayscale
filter to Change the color of an image
to black and white.
</p>
<h3>Original Image:</h3>
<img src="/css/images/logo.png" alt="image">
<h3>After using "grayscale" filter:</h3>
<br>
<img class="img" src="/css/images/logo.png" alt="image">
</body>
</html>
Using the brightness and saturate filters
In this approach, we have used CSS brightness and saturate filters to change the color of an image to black and white.
- The brightness filter is used to adjust the overall brightness controlling the lightness or darkness of the image.
- The "saturate" filter is used to adjust the saturation controlling the intensity of colors.
- We have used "filter: brightness(0.5) saturate(0%);" filters to change the image color to black and white.
Example
Here is an example implementing above mentioned step to changes the image color to black and white.
<html>
<head>
<title>
Changing color of image using "brightness" and "saturate" filters
</title>
<style>
body {
text-align: center;
}
.img {
filter: brightness(0.5) saturate(0%);
}
</style>
</head>
<body>
<h3>
Change the color of an image to black
and white using CSS
</h3>
<p>
In this example we have used brightness
and saturate filter to Change the color
of an image to black and white.
</p>
<h3>Original Image:</h3>
<img src="/css/images/logo.png" alt="image">
<h3>
After using "brightness" and "saturate" filters
</h3>
<br>
<img class="img" src="/css/images/logo.png" alt="image">
</body>
</html>
Conclusion
Converting an image to black and white using CSS is a simple process. In this article we have understood how to change the color of an image to black and white using CSS. We have discussed two different approaches which are by using grayscale filter and by using brightness and saturate filters.
13K+ Views
