Opacity

In CSS (Cascading Style Sheets), the opacity property is used to control the transparency of an element.
It affects how the content of an element is displayed about the elements beneath it.

The opacity property accepts a value between 0 and 1, where:

0: Completely transparent (invisible).
1: Completely opaque (fully visible).

Key Points:

If you use the CSS `opacity` property to make an element transparent, all its child elements will also become transparent. This may make it difficult to read text inside the transparent element. To avoid this, you can use RGBA color values instead. This will allow you to set the transparency of the background color without affecting the child elements. For more examples, check out the section below. without affecting the child elements.

Example:

<!DOCTYPE html> 
<html> 

<head> 
    <style>
        img.trans {
            opacity: 0.4;
            filter: alpha(opacity=40);
            /* For IE8 and earlier */
        }
    </style> 
</head> 

<body> 
    <p>Normal Image</p> 
    <img src="rose.jpg" alt="normal rose"> 
    <p>Transparent Image</p> 
    <img class="trans" src="rose.jpg" alt="transparent rose"> 
</body> 

</html>

Output:

Property Values

Value	Description
number	Specifies the opacity from 0.0 (fully transparent) to 1.0 (fully opaque)
initial	Reset this property to its default value.
inherit	Inherits this property from its parent element.