css3 opacity property

the opacity property control the transparency and opacity of an element.its values range from 0 to 1.

the opacity property syntax :-

          opacity:      value  |  inherit;

the internet explorer8 and earlier versions support the 'filter' property:-

          filter:         alpha(value);

overview table

opacity
initial value:1
applies to:all elements
inherited:no
media:visual
version:css3

browser support css opacity property

the opacity property supported in chrome,  safari,  opera  mozilla firefox  ie 9+ .

note:- the internet explorer8 and earlier versions supports an alternative, the filter property.like filter:alpha(opacity=10).


css opacity property example

<style  type="text/css">
   p {  
   		          opacity:1;
   		          
        		  filter:alpha(1);
        		  
          		  border:10px outset pink;
          		  
          		  background-color:green;
          		  
          		  color:white;
          		  
          		  padding:50px;
          		  
          		  width:360px;
          		  
          		  height:200px;
          }
          
  h1 {     opacity:0.50;
  
        		filter:alpha(0.50);
        		
          		border:10px outset  pink;
          		
          		background-color:green;
          		
          		color:white;
          		
          		padding:50px;
          		
          		width:360px;
          		
          		height:200px;
          }
          
  h1 {
          		opacity:0.20;
          		
          		filter:alpha(.20);
          		
          		border:10px outset pink;
          		
          		background-color:green;
          		
          		color:white;
          		
          		padding:50px;
          		
          		width:360px;
          		
          		height:200px;
          }          
             </style>

css opacity property values

valuedescription
valuespecifies the opacity.from 0.0 to 1.0 .
inheritinherit from the parent element.