How to Add Opacity Cross Browser

Sometimes we need to set 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 opaque (the default), fully transparent, or semi-transparent.

The value ranges between 0 and 1. For example, 1 makes the element fully opaque, and 0 makes it fully transparent. A value between 0 and 1 makes the element partially transparent.

How to set the opacity

Use the following:

Syntax of the CSS opacity property

css

.opacity {
  opacity: 0.5;
}

The opacity property is supported in all modern browsers, so vendor prefixes are no longer needed. Simply add the standard property to your CSS file:

css

.opacity {
  opacity: 0.5;
}

Note: The opacity property affects the element and all of its child elements.

Example of setting opacity:

Example of using opacity:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.a {
        opacity: 1;
      }
      img.b {
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <h1>Example of opacity property</h1>
    <h3>Opacity: 1.0;</h3>
    <img src="https://www.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="200" class="a" />
    <h3>Opacity: 0.5;</h3>
    <img src="https://www.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="200" class="b" />
  </body>
</html>

Result

**Opacity: 1.0;** ![house](https://www.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg) **Opacity: 0.5;** ![house](https://www.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg)

How to Add Opacity Cross Browser ​

How to set the opacity ​

Example of setting opacity: ​

Result ​

How to Add Opacity Cross Browser

How to set the opacity

Example of setting opacity:

Result