CSS opacity

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

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

ValueMeaning
0The element becomes fully transparent (Invisible).
Values between 0 to 1The element becomes translucent. (Anything behind the element can be seen)
1The 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.





Share Tweet Send
Loading...
You've successfully subscribed to Geekinsta
Great! Next, complete checkout for full access to Geekinsta
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.