In this article we will show you the solution of CSS opacity background image, in CSS, we can use opacity that represents the text, image is visible or invisible.
It ranges start from 0 and ends at 1. The smaller the opacity value means the image is blurry and the greater the opacity value means the image is more visible.
If we assign opacity 0 the image will be invisible, and if we assign more than 0 like image will slightly visible, and if we assign opacity as 1 the image will be completely visible.
Opacity is also in percentage format like 0%, 50% and 100%.
Step By Step Guide On CSS Opacity Background Image :-
Example 1
<html>
<head>
<title>Talkerscode</title>
<style>
.myimg1{
background:url("demo1.jpg"); /* It represents the sample image path */
height: 700px;
width: 600px;
opacity: 0%; /* The image is invisible */
}
.myimg2{
background:url("demo2.jpg");
height:700px;
width: 600px;
opacity: 50%; /* The image is lightly visible */
}
.myimg3{
background:url("demo3.jpg");
height:700px; /* It represents height of image */
width: 600px; /* It represents width of image*/
opacity: 100%; /* The image is completely visible */
}
</style>
</head>
<body>
<div class="myimg1">
<p>Image 1</p>
</div>
<div class="myimg2">
<p>Image 2</p>
</div>
<div class="myimg3">
<p>Image 3</p>
</div>
</body>
</html>
- In myimg1 class, we can assign a URL to the background image.
- Within the myimg1 class, we can assign the height and width of the image.
- And we assign opacity at 0% means that the image will not be visible.
- Within the myimg2 class, we can assign a url of the background image.
- Within the myimg2 class, we can assign the height and width of the image.
- And we assign opacity at 50% means that the image will be lightly visible.
- Within the myimg3 class, we can assign a url of the background image.
- Within the myimg3 class, we can assign the height and width of the image.
- And we assign opacity at 100% means that the image will be completely visible.
- We assign a div class myimg1,myimg2, and myimg3 and assign some text within the paragraph that will display in the image.
Example 2
<html>
<head>
<title>Talkerscode</title>
<style>
p{
font-size:24px;
}
.myimg1{
background:url("demo1.jpg");
height: 700px;
width: 600px;
animation: blinking1 1s infinite;
}
.myimg2{
background:url("demo2.jpg");
height: 700px;
width: 600px;
animation: blinking2 1s infinite;
}
@keyframes blinking1{
100%{opacity:1;}
50%{opacity:0;}
}
@keyframes blinking2{
50%{opacity:0.5;}
100%{opacity:1;}
}
</style>
</head>
<body>
<div class="myimg1">
<p>Image 1</p>
</div>
<div class="myimg2">
<p>Image 2</p>
</div>
</body>
</html>
- In myimg1 class, we can assign a URL to the background image.
- Within the myimg1 class, we can assign the height and width of the image and apply animation which means the image blinks every second. Every second the opacity changes.
- Within the myimg2 class, we can assign a URL to the background image.
- Within the myimg2 class, we can assign the height and width of the image and apply animation which means the image blinks every second. Every second the opacity changes.
- We can assign a keyframe for the myimg1 class named blinking1.
- Inside this, we can assign opacity 1 at 100% which means the image will be completely visible, and opacity 0 at 50% which means the image will be invisible.
- We can assign a keyframe for the myimg2 class named blinking2.
- Inside this, we can assign opacity 0.5 at 50% which means the image will be slightly visible, and opacity 1 at 100% which means the image will be completely visible.
- We assign a div class myimg1,myimg2 and assign some text within the paragraph that will display in the image.
Conclusion :-
In conclusion, we successfully learned how to apply opacity in the background image.
We also learned the image will blink and opacity changes every second. According to your needs, you can choose any one of the mentioned methods that suit you.
I hope this article on CSS opacity background image helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
