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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Is there a difference between SCSS and Sass?SCSSWhat are CSS Specificity Rules and how does browser apply them?CSSIf statement shorthand examples in JavaScriptJavaScriptHow to get recent posts in WordPress?WordPressHow to redirect or load a new document using JavaScript?JavaScriptHow to create a flip pricing table using CSS and JavaScript?CSS