How to set an opacity and transparency in CSS?

Opacity in CSS

The CSS property opacity specifies the transparency of an element.

The opacity of an element takes the value from 0.0 to 1.0 which is its range. The opacity value of 1 means the element is completely opaque with no transparency at all. On the other hand, the opacity value 0 means complete transparency with no opaque at all.

If you set opacity value as 0.6, it simply means 60% opaque and 40% transparent. You can apply opacity to images, text and via RGBA setting.

Let us now apply opacity for all its values ranging from 0.0 to 1.0

Opacity setting in text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        body{
            border:2px red solid;
            width:16%;
            padding:15px;
        }
        p#one{
            opacity:0.1;                             
        }
        p#two{
            opacity:0.2;                            
        }
        p#three{
            opacity:0.3;                              
        }
        p#four{
            opacity:0.4;                           
        }
        p#five{
            opacity:0.5;                           
        }
        p#six{
            opacity:0.6;                           
        }
        p#seven{
            opacity:0.7;                           
        }
        p#eight{
            opacity:0.8;                           
        }
        p#nine{
            opacity:0.9;                           
        }
        p#ten{
            opacity:1ss;                           
        }
    </style>
</head>
<body>
    <div class="container">
        <h4>Opacity with 0.1</h4>
        <p id="one">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
        <h4>Opacity with 0.2</h4>
        <p id="two">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
        <h4>Opacity with 0.3</h4>
        <p id="three">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
        <h4>Opacity with 0.4</h4>
        <p id="four">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
        <h4>Opacity with 0.5</h4>
        <p id="five">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
        <h4>Opacity with 0.6</h4>
        <p id="six">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
        <h4>Opacity with 0.7</h4>
        <p id="seven">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
        <h4>Opacity with 0.8</h4>
        <p id="eight">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
        <h4>Opacity with 0.9</h4>
        <p id="nine">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
        <h4>Opacity with 1</h4>
        <p id="ten">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
    </div>   
</body>
</html>
text opacity in css, www.programmingtutorial.in

You may also like to read about:

Formatting and styling text in CSS

Opacity setting in images

Like opacity setting in text, you can set opacity for images also. Let us better understand it with the help of code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        body{
            border:2px red solid;
            width:7%;
            padding:5px 10px;
        }
        p#one{
            opacity:0.1;            
        }
        p#two{
            opacity:0.5;                            
        }
        p#three{
            opacity:1;                              
        }
        img.align{
            width:100px;
            height:100px;
            border:1px solid green;
            align-items: center;  
        }
    </style>
</head>
<body>
    <div class="container">
        <h4>Opacity with 0.1</h4>
        <p id="one">
            <img class="align" src="mango.jpg">
        </p>
        <h4>Opacity with 0.5</h4>
        <p id="two">
            <img class="align" src="mango.jpg">
        </p>
        <h4>Opacity with 1</h4>
        <p id="three">
            <img class="align" src="mango.jpg">
        </p>       
    </div>   
</body>
</html>
Opacity setting in images

Opacity with RGBA

In addition to RGB CSS3 has introduced a new way RGBA to specify a color that includes alpha transparency as part of the color value. RGBA stands for Red Blue Green Alpha.

The RGBA declaration is a very easy way to set transparency for a color.

div{
background-color:rgba(70, 70, 154, 0.2);}

The first three numbers represent color and the fourth value represents its opacity. Let us now write a code to better understand this concept.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo elements</title>
    <style>
        body{
            border:2px red solid;
            width:7%;
            padding:5px 10px;
        }
        p#one{
            width:100px;
            height:30px;
            color:rgb(22, 16, 16, 1);
            border:1px solid green;
            align-items: center;
            background-color: rgba(70, 70, 153, 0.2);
                    
        }
        p#two{
            width:100px;
            height:30px;
            color:rgb(22, 16, 16, 1);
            border:1px solid green;
            align-items: center;
            background-color: rgba(70, 70, 153, 0.5);                         
        }
        p#three{
            width:100px;
            height:30px;
            color:rgb(22, 16, 16, 1);
            border:1px solid green;
            align-items: center;
            background-color: rgba(70, 70, 153, 1);                          
        }
        
    </style>
</head>
<body>
    <div class="container">
        <h4>Opacity with 0.1</h4>
        <p id="one">
            Para1
        </p>
        <h4>Opacity with 0.5</h4>
        <p id="two">
           Para2
        </p>
        <h4>Opacity with 1</h4>
        <p id="three">
           Para3
        </p>
        
    </div>   
</body>
</html>
Opacity with RGBA