Drupal Technical

How to set crossbrowser compatible opacity for a div using CSS?

Tintu.manuel | | 1 min read

Opacity is the CSS property that allows image transparency. All modern browsers support CSS opacity. However, if you want it to function in the older versions of browsers, some cross browser tricks are required. Follow these CSS rules to enable cross browser compatible opacity settings for your HTML elements

.opacity {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

  /* IE 5-7 */
  filter: alpha(opacity=70);

  /* Netscape */
  -moz-opacity: 0.7;

  /* Safari 1.x */
  -khtml-opacity: 0.7;

  /* Normal browsers */
  opacity: 0.7;
}

This code will work in IE 5 and the latest versions and other browsers such as Firefox, Chrome, Safari etc. All you have to do is copy the above class definition to your CSS file and apply the class opacity to the HTML elements (images) that require opacity. Do note that the opacity setting defined in the class is 0.7. You can change it to a value that suits your needs. You can individually use the above properties in other classes to set up opacity for different classes as well.

 

 

Related Topics