HOLLA TECH - LEARN

The opacity Property
 

CSS opacity property provides an excellent means of adding opacity to any element.
In the example below, we set different levels of opacity to the same picture, so you can clearly see the difference. 

#img1 {
  opacity: 1;
}
#img2 {
   opacity: 0.5;
}
#img3 {
   opacity: 0.25;
}

 

Result: 

Holla Tech - Learn CSS3

NOTE!
The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Opacity in Internet Explorer ]/su_heading] 

To have the opacity property work in all versions of IE, use the filter:alpha(opacity=x) along with the opacity property. x can take a value from 0 to 100.
The value 0 results in a completely transparent element (i.e., 100% transparent), whereas the value 100 makes the element completely opaque (i.e., 0% transparent).

For example, in order to have the code work properly with IE, when the opacity of the image is set at 0.5, it should look like this:

#img {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

 

NOTE!
The alpha filter is a Microsoft-only property, not a standard CSS property.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT