CSS Opacity

To specify the clarity of the image or the transparency of an element, the CSS Opacity is used.

To apply the CSS opacity setting:

The setting of the CSS opacity is implemented uniformly over the whole object. It is not inherited. Defined in terms of digital value less than 1, the greater opacity value renders lesser opacity.

Example: Image transparency:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.4;
  filter: alpha(opacity=40);
}
</style>
</head>
<body>
 
<h1>Example:</h1>
<p>Image with 40% opacity.</p>
<img src="img.jpg" alt="Sky" width="200" height="200">
</body>
</html>

Output:

Explanation:

In the above example, we are defining the image transparency using CSS Opacity.

Please Share