Opacity Cross Browser

Sometimes we need to set the opacity in our CSS code. The opacity property sets the level of transparency of an element.

This property allows us to make an element fully transparent, default or half-transparent.

The number ranges between 0 and 1. For example, the value of 1 makes the element fully opaque. A value of 0 makes the element fully transparent. A value between 0 and 1 gradually makes an element clear.

How to Set the Opacity

Here is the example.

.opacity{
    opacity: 0.5;
}

We need to write the same code for all browsers.

Here the code of opacity for cross browsers.

.opacity{
  /* 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;
}

We need to add this code in our CSS file for opacity.


Related Resources

Do you find this helpful?

Related articles