| 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
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: valueArguments
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
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.
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.
