Code:
<!DOCTYPE html>
<html>
<head>
<style>
img.one {
opacity: 30%;
}
img.two{
opacity: 70%;
}
img.three{
opacity: 100%;
}
</style>
</head>
<body>
<h1>Transparency of Image in CSS</h1>
<p>The lower the value, more transparent image will be:</p>
<p>Image with 30% opacity:</p>
<img class="one" src="https://static.wixstatic.com/media/0f65e1_c524ba71d13e425f9e1e9cdad9fc7176~mv2.jpg" alt="Forest" width="400" height="200">
<p>Image with 70% opacity:</p>
<img class="two" src="https://static.wixstatic.com/media/0f65e1_c524ba71d13e425f9e1e9cdad9fc7176~mv2.jpg" alt="Forest" width="400" height="200">
<p>Image with 100% opacity:</p>
<img class="three" src="https://static.wixstatic.com/media/0f65e1_c524ba71d13e425f9e1e9cdad9fc7176~mv2.jpg" alt="Forest" width="400" height="200">
</body>
</html>Output:
Sofia Sondh
The Tech Platform
Comments