CSS Opacity

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.

How to apply CSS opacity setting

Opacity setting is applied uniformly across the entire object and the opacity value is defined in term of digital value less than 1. The lesser opacity value displays the greater opacity. Opacity is not inherited.

CSS Opacity Example: transparent image

Let's see a simple CSS opacity example of image transparency.

<!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">
<p>Transparent Image</p>
<img class="trans" src="rose.jpg" alt="transparent rose">
</body>
</html>

Test it Now

Output:

Normal Image

Transparent Image

Note 1: Chrome, Firefox, Opera, Safari, and IE9 use the opacity property for transparency. The opacity value ranges from 0.1 to 1.0. Lower value produces the greater opacity.

Note 2: The older versions of IE use filter: alpha(opacity=x). Here x value varies from 0 to 100. Lower value produces the greater opacity.

Next TopicCSS Overflow

← prev next →

CSS Tutorial

CSS Properties

CSS Advance

CSS Design

Interview Questions

CSS Opacity

How to apply CSS opacity setting

CSS Opacity Example: transparent image

Note 1: Chrome, Firefox, Opera, Safari, and IE9 use the opacity property for transparency. The opacity value ranges from 0.1 to 1.0. Lower value produces the greater opacity.

Note 2: The older versions of IE use filter: alpha(opacity=x). Here x value varies from 0 to 100. Lower value produces the greater opacity.