CSS: Opacity in all browsers

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.


Comments

2 responses to “CSS: Opacity in all browsers”

Leave a Reply

Your email address will not be published. Required fields are marked *

*