CSS Opacity
With the help of CSS Opacity, you can define the transparency of an element.
CSS Opacity Property Syntax
Let’s see the CSS Opacity property syntax, which is given below:
Opacity: value;
The CSS opacity value is varying from 0.0 to 1.0. The lower value of the opacity, the more transparent elements. Let’s see below some examples of transparent Image:
Example- Transparent Image
The given example define that an image opacity value is 0.4
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.4;
}
</style>
</head>
<body>
<h2>Opacity Image Transparency</h2>
<p>The given example define that an image opacity value is 0.4</p>
<img src="Cake-Php-logo.png" alt="Forest" width="170" height="100">
</body>
</html>
Output
Original image
Without applying opacity
Transparet Image
The given example define that an image opacity value is 0.4
Opacity value is 0.2 then Image Transparency