CSS opacity

CSS Opacity property is used to specify the transparency of the element. It can have values between 0.0 and 1.0.

Syntax

opacity: value;

Values

Value	Meaning
0	The element becomes fully transparent (Invisible).
Values between 0 to 1	The element becomes translucent. (Anything behind the element can be seen)
1	The element becomes fully opaque (solid).

<!DOCTYPE html>
<html>
<head>
    <style>
    p{color:white;background:teal;}
    </style>
</head>
<body>
    <p style="opacity:0.2;">I have opacity 0.2</p>
    <p style="opacity:0.4;">I have opacity 0.4</p>
    <p style="opacity:0.8;">I have opacity 0.8</p>
    <p style="opacity:1;">I have opacity 1</p>
</body>
</html>

Output

I have opacity 0.2

I have opacity 0.4

I have opacity 0.8

I have opacity 1

Things to remember

The opacity of the parent element will be applied to all the child elements.
Using RGBA values, you can keep the child elements opaque.

Using RGBA

RGB stands for Red, Green and Blue. Instead of specifying colors using their names or hexadecimal values, you can use any integer between 0 to 255.

The A in RGBA stands for alpha channel. This is used to define the transparency of the color.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
    p{color:white;background:rgba(45,35,56,0.5);}
    </style>
</head>
<body>
    <div style="background:url('https://static.geekinsta.com/wp-content/uploads/2018/10/bg_img_01.jpg');height:150px;">
        <div style="background-color:rgba(0,0,10,0.4);">
        <br><br>
        <p style="color:white;>I have opacity 0.6. 
My background is transparent and the text is opaque.</p>
        <br><br>
        </div>
    </div>
</body>
</html>

I have opacity 0.6. My background is transparent and the text is opaque.