08.21.2019

CSS: Cross Browser Opacity

Sometime, css opacity does not work well on IE. So opacity become a difficult thing on cross browser.

You can use css opacity property like this:
.thing {
    opacity: 0.5;
}

0 is totally transparent (not visible at all) and 1 is totally opaque (default). 
For cross browser opacity you can use like this:
.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

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

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

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

  /* Good browsers */
  opacity: 0.5;
}


Hope this help.

Leave a comment