You are here: Reference > CSS > properties > opacity

opacity property

Browser support:
9
Sets the transparency level of an element. For Internet Explorer, use filter with 'Alpha(opacity=percent)'.
Note: Internet Explorer supports the opacity property from version 9.
In older Internet Explorer versions, use the filter.alpha property.
The opacity property works for all elements, as opposed to Internet Explorer's filter.alpha property that only works for absolute positioned elements.
The example below shows a cross-browser solution for creating the opacity effect from CSS.
JavaScript page for this property: opacity. You can find other example(s) there.

Possible values:

 One of the following values: 
inherit
Takes the value of this property from the computed style of the parent element.
opacity (floating-point [0-1])
Floating-point number [0-1] .
Default: 1.

Example HTML code 1:

This example illustrates the use of the opacity property:
<head>
    <style>
        .opacity {
            opacity: 0.5;
        }

        .IEopacity {
            filter:alpha(opacity=50);
            position:absolute;
            left:30px;
            top:100px;
        }
    </style>
</head>
<body>
    <a class="opacity IEopacity">This text has an opacity of 0.5</a>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content