CSS OPACITY
- The
opacityproperty specifies the opacity/transparency of an element. - The CSS opacity property is used to specify the transparency of an element. In simple word, you can say that it specifies the clarity of the image.
- In technical terms, Opacity is defined as degree in which light is allowed to travel through an object.
SYNTAX
<!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="rose.jpg" alt="normal rose">
</body>
</html>
EXAMPLE
<html>
<head>
<style>
img {
opacity: 0.4;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>
<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="180" height="100">
</body>
</html>
OUTPUT
