Yogesh Chauhan's Blog

How to set opacity or transparency using CSS?

in CSS on June 28, 2019

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.

Click to download image

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.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
MIN, MAX, COUNT, AVG and SUM in SQLSQL/MySQLNumber Properties in JavaScriptJavaScriptUseful (and probably ignored) HTML tags: Part 1HTMLCreate a galley with overlapping images using CSS gridCSSSome EASY-to-Understand CSS media query examplesCSSHow to create a for loop in SCSS (Sass)?SCSS