Refresh

This website www.w3schools.blog/css-opacity is currently offline. Cloudflare's Always Online™ shows a snapshot of this web page from the Internet Archive's Wayback Machine. To check for the live version, click Refresh.

CSS Opacity

To specify the clarity of the image or the transparency of an element, CSS Opacity is used.

To apply the CSS opacity setting:

The setting of the CSS opacity is implemented uniformly over the whole object. It is not inherited. Defined in terms of digital value less than 1, the greater opacity value renders lesser opacity.

Example: Image transparency:

<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.4;
filter: alpha(opacity=40);
}
</style>
</head>
<body>
<h1>Example:</h1>
<p>Image with 40
<img src="img.jpg" alt="Sky" width="200" height="200">
</body>
</html>

Explanation:

In the above example, we are defining image transparency using CSS Opacity.