opacity

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes No Yes Yes

Short information
CSS CSS3
Default value 1
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/css3-color/#transparency

Description
This parameter defines transparency level of the web page element. Background drawing or other elements located below of the translucent object appear through an element at a partial or full transparency.

Syntax

opacity: value

Arguments
The number from a range [0.0 acts; 1.0] is the argument. The value 0 corresponds to a full transparency of an element. The value 1corresponds to its opacity. Fractional numbers of a kind 0.6 determine semi-transparency. It is supposed to write numbers without zero ahead, such as a kind opacity: 6.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>opacity</title>
  <style type="text/css">
   IMG.semi {
    opacity: 0.5; /* Element's opacity */
   }
  </style>
 </head>
 <body>
  <p>
    <img src="images/igels.png" alt="Usual image">
    <img src="images/igels.png" alt="Translucent image" class="semi">
  </p>
 </body>
</html>

The result of this example is shown on the figure 1


Remark
Internet Explorer uses filters for opacity changing; that;s why we must write "filter: alpha(opacity=50)" where the argument "opacity" may have values from 0 to 100.