The CSS opacity attribute is utilized to define the level of transparency of a particular element. Put simply, it determines the clearness of the image.
In technical jargon, Opacity is characterized as the extent to which light can pass through an object.
How to apply CSS opacity setting
The opacity setting is uniformly implemented on the entire object, with the opacity value specified in terms of a digital value less than 1. Lower opacity values result in higher transparency. Opacity is not passed down through inheritance.
CSS Opacity Example: transparent image
Let's explore a basic demonstration of CSS opacity to achieve image transparency.
Example
<!DOCTYPE html>
<html>
<head>
<style>
img.trans {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<p>Normal Image</p>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="normal rose">
<p>Transparent Image</p>
<img class="trans" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="transparent rose">
</body>
</html>
Output:
Normal Image
Transparent Image