Online Snippets Library

Create cross browser transparency in CSS

Add following CSS code to the element on Which you want to apply cross browser transparency.

0 is totally transparent like hidden and 1 is totally opaque like default. Anything between 0 to 1 is partially transparent.

Example

<!DOCTYPE html>
<html>
<head>
<title>Create cross browser transparency in CSS | Tutsway.com</title>
<style type="text/css">
#transparentdiv {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";  /* for internet explorer 8 */
  filter: alpha(opacity=40); /* for internet explorer  5-7*/
  -khtml-opacity: .4;      /* for khtml and  old safari */
  -moz-opacity: .4;       /* for mozilla and netscape */
  opacity: .4;           /* for fx, safari and opera */
    }
</style>
</head>
<body>
<div id="transparentdiv">
We have applied our css on this div
</div>
</body>
</html>