The example below will show you how to set a transparency or opacity of an image and then I’ll also show you how to do the same for any element as well
Let’s download one high definition image first. Use the following link from Pixbay to download image. Although, you can choose your own image. This is just for the example purpose only.
Awesome. Now I assume you have a basic knowledge of how HTML works. So, I’ll skip the HTML talks and discuss about the code below.
...
<img alt="nature-image-CSS-opacity-example" src="images/CSS/opacity-transparency-CSS.jpg" />
...
All we need to do is just add an image in the HTML body. I’ve an image in the folder so the href is a bit longer. You can have the image in any folder and with any name. Always try to add the alt attribute of an image so that in case if browser can’t open the image then it’ll at lease show the alter texts and user might get an idea about the image.
The opacity property sets the transparency of any image or div, basically any element. To make it more transparent you can decrease the value.
Let’s set 50% opacity for the following image first
Add the style as in the code below.
img{
opacity: 0.5;
}
I know. It’s easy.
The opacity property takes values from 0.0 to 1.0. If it’s 0.0 then you won’t be able to see and if it’s 1.0 then you’ll see the image as it is. So, lower the value if you want to make any element more transparent.
So as you can see now that we’ve set the image as full background. Checkout the DEMO from the link given at the end of this article.
What about elements like div?
It’s same type of code for any elements. Let’s write down some code and then discuss the example.
Let’s add some div elements in our page first.
<div class="two">
<p>opacity 0.2</p>
</div>
<div class="four">
<p>opacity 0.4</p>
</div>
<div class="six">
<p>opacity 0.6</p>
</div>
Now let’s just add some style to that HTML code.
div{
background-color: blue;
padding: 20px;
}
div.two {
opacity: 0.2;
}
div.four {
opacity: 0.4;
}
div.six {
opacity: 0.6;
}
As you can see we can set the opacity for any elements.
opacity transparency
