What is opacity?

css3 opacity
CSS3 OPACITY

CSS-3 opacity sets the opaqueness of the element. The value of CSS3 opacity is a floating value, between 0 and 1.
0 defines the element as fully transparent( same like visibility:hidden), whereas an opacity value 1 means the element is fully opaque( default).

CSS3 Opacity

Possible values of opacity

Opacity values
1 default opacity of all elements.
0 Opacity 0 shows element as fully transparent. Same like (visibility:hidden)
0.5 Opacity 0.5 shows element as half transparent. Thus we can see background colors and images.

How to use opacity

Opacity values are always floating values, minimum value is 0, and maximum value is 1.

            
 <style>           
    .img-1{opacity:1}				
    .img-2{opacity:0.8}				
    .img-3{opacity:0.5}				
    .img-4{opacity:0.2}				
</style>
 <div>     
     <img class="img-1" src="images/logo.png" alt="Tech Altum"> 
     <img class="img-2" src="images/logo.png" alt="Tech Altum"> 
     <img class="img-3" src="images/logo.png" alt="Tech Altum"> 
     <img class="img-4" src="images/logo.png" alt="Tech Altum"> 
                   	
 </div>                   	
           		
            
          
tech altum

Opacity:1

tech altum

Opacity:0.8

tech altum

Opacity:0.5

tech altum

Opacity:0.2


Opacity in IE8 and below

Internet Explorer 8 and below doesn't support opacity. But using css filter property, opacity can works even on old IE versions like IE 8, 7 , 6 and 5.

Opacity in Internet Explorer IE8 and below


<style>
.box{ 
    opacity:0.5;                      /*latest Browsers*/
    filter: alpha(opacity=50)         /*IE 5-7*/
    -ms-filter: alpha(opacity=50)     /*IE 8*/
}
</style>
                                    
                  
              

Note: opacity is supported in html5 based browsers only. IE 8 and below doesn't support opacity. For old IE versions, use filter:alpha(opacity=n), where n is a number between 0-100.