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 darken an Image using CSS?
CSS is a popular language for formatting web pages in web development. It allows you to change and improve the appearance of numerous components on a web page, including photos.
In this article, we will be discussing about darkening a picture is a typical method for making a photograph appear more dramatic or melancholy. The brightness and contrast levels of the image are altered in this procedure to make it look darker. This may be accomplished using CSS by applying filter effects to the picture, which can be tailored to generate the required amount of darkness.
Approaches
There are various methods for darkening a picture with CSS, including −
The Filter Property
Overlay with a semi-transparent color
Let us look at each approach in detail with examples now.
Approach 1: `The Filter Property`
The first approach to darken an image using CSS is by the `Filter Property`.The CSS filter feature is one of the most basic and extensively used methods for darkening a picture. This attribute allows you to add numerous effects to a picture, such as brightness and contrast. To darken an image, use the "brightness" filter and set the value to less than 100.
Here, we will go through a example to implement this approach −
<!DOCTYPE html>
<html>
<head>
<title>Darken Image using CSS filter property</title>
<style>
.darken-image {
filter: brightness(100%);
}
</style>
</head>
<body>
<img src="https://images.unsplash.com/photo-1679872996070-7903e943d24a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" class="darken-image">
</body>
</html>
Approach 2: `Overlay with a semi-transparent color`
The second approach to darken an image using CSS is by the `Overlay with a semi-transparent color`. Create a second div element with a background color and alter its opacity level to reach the appropriate darkness.
Here, we will go through an example to implement this approach −
<!DOCTYPE html>
<html>
<head>
<title>Darken Image using CSS overlay with semi-transparent color</title>
<style>
.darken-image {
position: relative;
display: inline-block;
}
.darken-image img {
display: block;
}
.darken-image .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}
</style>
</head>
<body>
<div class="darken-image">
<img src="https://cdn.pixabay.com/photo/2022/06/27/18/56/grass-7288141__340.jpg">
<div class="overlay"></div>
</div>
</body>
</html>
Conclusion
There are several methods for darkening a picture using CSS, each having pros and downsides. The filter property method darkens an image without impacting other items on the page and may be applied straight to the picture. The semi-transparent overlay solution is more versatile and may be applied to any container element, but it requires an additional HTML element and can affect other items positioned below the overlay.
16K+ Views
To Continue Learning Please Login