In this tutorial we will show you the solution of background image opacity CSS, the opacity of the image is actually the transparency of the image.
This feature is actually used to edit images for background, avatar, and for many other purposes which we want to fulfill with help of images.
So, let us today understand one component of image editing which is opacity.
Step By Step Guide On Background Image Opacity CSS :-
In this article, we learn about the image editing component is opacity. As we know opacity is known as the transparency of the image.
There is mainly one efficient way which is mostly used to apply opacity using CSS. Let us first see the syntax to apply opacity in HTML using CSS.
htmlElementTag
{
opacity: 0.5;
}
The value of the opacity lies between 0 to 1. Here, 1 is the highest whereas 0 is the lowest.
To describe the opacity value of an image we have to give a value between 0 to 1. Let us see an example for better understanding.
<!DOCTYPE html>
<html>
<head>
<title> CSS tutorials </title>
<style>
#img1 {
opacity: 0;
}
#img2 {
opacity: 0.2;
}
#img3 {
opacity: 0.4;
}
#img4 {
opacity: 0.6;
}
#img5 {
opacity: 0.8;
}
#img6 {
opacity: 1;
}
</style>
</head>
<body>
<h1>
Talker’s code – CSS tutorials
</h1>
<h2>
Background image opacity CSS
</h2>
<img src="img_forest.jpg" alt="Forest" width="200" height="100" id="img1" >
<img src="img_river.jpg" alt="River" width="200" height="100" id="img2">
<img src="img_flower.jpg" alt="Flower" width="200" height="100"
id="img3">
<img src="img_roads.jpg" alt="Roads" width="200" height="100"
id="img4">
<img src="img_animals.jpg" alt="Animals" width="200" height="100" id="img5">
<img src="img_house.jpg" alt="House" width="200" height="100" id="img6">
</body>
</html>
- As, here we see that we that in above example we show you an example in which HTML and CSS codes are used.
- Here, first of all, we create a basic structure of HTML, in which we use <!DOCTYPE html> which defines the type of document. And next one is our HTML tags. These tags are paired tags and all the data regarding HTML is written inside these tags.
- After we use our head tag which is again paired tag and contains the title and meta information of the webpage. The data written inside the head is not shown on the webpage.
- Now, next is our title tag which defines the title of the webpage. The tag which has its closing tag is known as a paired tag. So, this is again a paired tag.
- Now, next is the body which is the main tag of HTML. The data which we have written inside the body is shown on the webpage. Mostly all tags which are helpful to show data or information on the screen are written under the body tag.
- As, we above see that we use a different image to show you the effect of opacity at different values. We hope you easily understand the effect of opacity with the help of above example.
Conclusion :-
At last, in conclusion, here we can say that with the help of this article we are able to understand background image opacity in CSS.
I hope this tutorial on background image opacity CSS helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
