Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

Opacity CSS Style, CSS Tutorial


Opacity property in CSS specifies how transparent an element is!
We use CSS opacity property to set the opacity level for any HTML element

Set Opacity level using CSS Style

Here we have given two different example of setting opacity to different images
Opacity example
opacity: 0.3;
filter: alpha(opacity=30)
Opacity example
opacity: 0.6;
filter: alpha(opacity=60)

Remember when using the opacity property to add transparency to the background of any element, all of its child elements will become transparent as well. This will make the inner content fully transparent element, thus will be hard to read.

But there is way to keep the child element non transparent,
use background: rgba(10, 115, 219, 0.3);
this is how the result will look like
Some Text Here
Some Text Here
Some Text Here

Here is the Code
div.first
{
background: rgba(10, 115, 219, 0.1);
}

div.second
{
background: rgba(10, 115, 219, 0.3);
}

div.third
{
background: rgba(10, 115, 219, 0.6);
}

 
Opacity CSS Style, CSS Tutorial

Group Training