opacity property in CSS

CSS | opacity Property: Here, we are going to learn about the opacity property with syntax and examples in CSS.
Submitted by Anjali Singh, on November 22, 2019

CSS | opacity Property

With the growing need of making websites, the need for styling them has also increased. Therefore, CSS has become an indispensable part of creating websites. Thus one must be aware of which properties to use while creating a website.

Various properties are used for styling. Since there are so many properties to use for, it is natural for any beginner to get confused about which property to use and when.

In this segment, the discussion will be on one such property which is known as opacity.

Before implementing opacity property right away let's first discuss this property out of the CSS's context.

opacity property

opacity is the degree of transparency of any element living or non living. If we say that a certain object is opaque then it means that object has 0 transparency, which in turn means that no one can look through that object.

And if we say that a certain object is transparent then that object has 0 opacity.

The same meaning of opacity holds in the CSS as well. let's have a look!

Definition: As mentioned earlier the opacity is the degree of transparency. In CSS the opacity property tends to set the opacity of an element.

Degrees of Opacity:

1 means that the object is not transparent at all.
0.5 means that the object is semi-transparent.
0 means that the object is entirely transparent.

Note: The drawback of opacity property is that if you set your elements to be transparent then all the children of attributes will also become transparent. If you want to avoid this and want to make your texts readable inside the element, then you should RGBA values instead.

The default value of opacity is 1.

CSS Syntax:

    Element{
        opacity: number|initial|inherit;
    }

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            background-color: green;
            opacity: 0.55;
        }
    </style>
</head>

<body>
    <div>This following div element's opacity is 0.55</div>
    <div>The background colour is affected by the opacity level.</div>
</body>

</html>

Output

In the above example, the opacity level of 0.55 is applied to the div element.

Value	Description
number	This specifies the opacity from 0.0 ( transparent) to 1.0 ( opaque).
initial	This sets this property to its default value.
inherit	Helps in inheriting this property from its parent element.

Conclusion:

When it comes to using opacity property one should be very considerate in using it as given its drawback this property can also make your sub-elements opaque as well.

opaque property is a very good tool when it comes to styling pictures. So have fun using it!

CSS Tutorial & Examples »

overflow Property in CSS

max-width property in CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples