CSS Opacity / Transparency

CSS Opacity/Transparency


CSS Opacity / Transparency

By default, most elements start out with a transparent background. 

When a background color or image is assigned, that element becomes opaque. 

You cannot see through the element to what's behind it. Borders and text are also opaque. 

You can change this behavior with the opacity property. 

opacity applies to the entire element – background, border, text, images, and any other content within that element or its children.

The opacity property takes a number between 0 and 1 or a percentage from 0% to 100%. 

This sets the level of transparency of the element. An opacity of 0.5, or 50%, is half transparent.

Now we will see example -

Example  - Demonstration of opacity

 

class="outer">
class="inner">
Hello World!

 

 


Output -

Notice that the red background of the outer box partially shows through the inner box and its text. If we set opacity to 0.2, the inner box becomes even more transparent and is barely visible

Decreasing the opacity

Example - Making images OPEC when hover -

Output