CSS Opacity
The CSS opacity property is used to control how transparent an element is. In simpler terms, it determines how clear or see-through the image appears.
Technically, opacity refers to the extent to which light can pass through an object.
How to appiy CSS opacity setting
The opacity setting applies evenly to the whole object, and the opacity value is represented as a number less than 1. A lower opacity value means the object is more transparent. Opacity is not inherited by child elements.
CSS Opacity Example:transparent image
Let's look at a simple example of using CSS to make an image transparent.
<!DOCTYPE html>
<html>
<head>
<style>
img.transparent {
opacity: 0.4;
filter: alpha(opacity=40);
}
</style>
</head>
<body>
<p>Original Image</p>
<img src="nature.jpg" alt="original nature Image">
<p>Transparent Image</p>
<img class="transparent" src="nature.jpg" alt="transparent nature Image">
</body>
</html>
Output
.png)
.png&description=CSS OPACITY){kind=link}