Introduction:

In this article we will to learn what is CSS Opacity property or how to use CSS Opacity property or CSS Opacity property with example.

 

Description:

The CSS opacity property is used to add transparency to the background of an element,

All of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead of opacity.


Example of CSS Opacity property:


 <!DOCTYPE html>
<html>
<head>
    <style>
        .default {
            background-color: #4CAF50;
            padding: 10px;
        }
 
        .first {
            background-color: #4CAF50;
            padding: 10px;
            opacity: 0.1;
            filter: alpha(opacity=10); /* For IE8 and earlier */
        }
 
        .second {
            background-color: #4CAF50;
            padding: 10px;
            opacity: 0.3;
            filter: alpha(opacity=30); /* For IE8 and earlier */
        }
 
        .third {
            background-color: #4CAF50;
            padding: 10px;
            opacity: 0.6;
            filter: alpha(opacity=60); /* For IE8 and earlier */
        }
    </style>
</head>
<body>
    <h1>The opacity Property</h1>
 
    <p>The opacity property adds transparency to the background of an element </p>
 
    <div class="first"><p>opacity 1</p></div>
    <div class="second"><p>opacity 0.3</p></div>
    <div class="third"><p>opacity 0.6</p></div>
    <div class="default"><p>opacity 1 (default)</p></div>
 
</body>
</html>


  

 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like