YogeshChauhan . com

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.

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to switch dark and light themes using pure CSS?CSSHow to create a simple drop down menu using JavaScript and CSS?CSSOptional arguments, Default parameters and REST parameters in JavaScriptJavaScriptclip and clip-path properties in CSSCSSHow to list all PHP variables to debug the script?PHPHow to use GROUPING SETS to boost GROUP BY queries in Postgres?Postgres