Opacity / Transparency in CSS3

How to specify the transparency of an element in CSS3?

By using opacity property we can specify the transparency of an element. It is applies to all the elements and images on the web page. The opacity-level indicates the transparency-level, where "opacity:0;" gives the complete transparency, "opacity:0.5;" gives the 50% transparency, "opacity:1;" gives 0% transparency, that means it shows the content normally on the webpage.

<style>
        p {
            color: blue;
            opacity: 0.5;
        }

        div {
            background-color: red;
            opacity: 0.3;
        }

        b {
            color: brown;
            opacity: 1;
        }
</style>

<body>
    <p>This is 'P' element.</p>
    <div>
        This is 'DIV' element.
    </div>
    <b>This is Bold.</b>
</body>

In the above code snippet we have given opacity property to all the elements with different values. So that in the output we can observe the 50% transparency of the <p> element text color, 70% transparency of the <div> element back-ground color, 0% transparency of the <b> element.

OUTPUT

Views: 3868 | Post Order: 41

CSS3 > Colors

Opacity / Transparency in CSS3

How to specify the transparency of an element in CSS3?

Related Posts

Utility Tools