CSS: Opacity in all browsers

July 7, 2011 | In: css, HTML, jquery, php, web development

Today’s market is based on 3D and most things are doing by jQuery or Javascript to make fast loading application. Opacity is a part of CSS to make transparent image without PNG format. To set the opacity property to an image you can use:

.img_transparent_class{ opacity: 0.5; }

But this line will suitable for some latest browsers and it will not show effects in some browsers like IE 7 and IE8, etc.
To apply in all browsers you can follow:

.img_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;

Above code will transparent the image in all browsers but there is an another conditions that you have to follow order. Means “-ms-filter” property should be write before “filter” property.

That’s it.