CONCEPT OF OPACITY IN CSS ( # tutorial 25 )

Today we will see the concept of opacity in css.
Opacity actually defines the percentage of the image that will be shown to the user on the web page.
It we set the opacity low than the image will be hardly visible and vice versa for the case opposite.

Let us take two same images to see what is the difference when we use or do not use opacity.

Final OutPut :

Screenshot from 2020-11-22 00-03-01.png

Step 1 : Create a proper html structure for your file.

Step 2 : Write following code inside the style tag.

Screenshot from 2020-11-22 00-02-46.png

Step 3 : Run the file with any of the browser to see the result.

Screenshot from 2020-11-22 00-03-01.png

Full Code :

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>Inline CSS</title>
   <style>
       .image1{
           
           height: 200px;
           width: 200px;
           opacity: 0.6;
           margin-right: 35px;
       }.image2{
           height: 200px;
           width: 200px;
           opacity: 1;
       }
   
   
   </style>

 </head>
 <body>
    "<"img class="image1" src="IMAGES/image2.jpg">
     "<"img class="image2" src="IMAGES/image2.jpg">
   
 </body>

</html>

So you see the difference in the two images. one is little dim and other is dark. one has opacity set to 0.6 and one has opacity equals to 1.
opacity is between 0 and 1.

Ask Your doubts in the comments below:

Thank You.

CONCEPT OF OPACITY IN CSS ( # tutorial 25 )

Link For Previous Tutorials