opacity_test.html

To determine opacity, it is not enough to simply read a property value but some visual inpection is needed in order to verify if the property is applied. This is specially true in IE which is vey sensible to the syntax of the filter property.

id | style | comment | example | ie6 | ie7 | ie8 | others
--- | --- | --- | --- | --- | --- | --- | ---
1 | filter:alpha(opacity=0) |  | xxxx | 0 | 0 | 0 | 1
2 | filter:alpha(opacity=20) |  | xxxx | 0.2 | 0.2 | 0.2 | 1
3 | filter:alpha(opacity=100) |  | xxxx | 1 | 1 | 1 | 1
4 | filter:alpha(opacity=0) | non positioned element | xxxx | 1 | 1 | 1 | 1
5 | filter:alpha(opacity=20) | non positioned element | xxxx | 1 | 1 | 1 | 1
6 | filter:alpha(opacity=100) | non positioned element | xxxx | 1 | 1 | 1 | 1
7 | filter=progid:...:Alpha(Opacity=0) |  | xxxx | 0 | 0 | 0 | 1
8 | filter=progid:...:Alpha(Opacity=20) |  | xxxx | 0.2 | 0.2 | 0.2 | 1
9 | filter=progid:...:Alpha(Opacity=100) |  | xxxx | 1 | 1 | 1 | 1
10 | filter:'progid:...:Alpha(Opacity=0)' |  | xxxx | 1 | 1 | 1 | 1
11 | filter:'progid:...:Alpha(Opacity=20)' |  | xxxx | 1 | 1 | 1 | 1
12 | filter:'progid:...:Alpha(Opacity=100)' |  | xxxx | 1 | 1 | 1 | 1
13 | -ms-filter=alpha(opacity=0) |  | xxxx | 1 | 1 | 1 | 1
14 | -ms-filter=alpha(opacity=20) |  | xxxx | 1 | 1 | 1 | 1
15 | -ms-filter=alpha(opacity=100) |  | xxxx | 1 | 1 | 1 | 1
16 | -ms-filter='alpha(opacity=0)' |  | xxxx | 1 | 1 | 0 | 1
17 | -ms-filter='alpha(opacity=20)' |  | xxxx | 1 | 1 | 0.2 | 1
18 | -ms-filter='alpha(opacity=100)' |  | xxxx | 1 | 1 | 1 | 1
19 | -ms-filter=progid:...:Alpha(Opacity=0) |  | xxxx | 1 | 1 | 1 | 1
20 | -ms-filter=progid:...:Alpha(Opacity=20) |  | xxxx | 1 | 1 | 1 | 1
21 | -ms-filter=progid:...:Alpha(Opacity=100) |  | xxxx | 1 | 1 | 1 | 1
22 | -ms-filter='progid:...:Alpha(Opacity=0)' |  | xxxx | 1 | 1 | 0 | 1
23 | -ms-filter='progid:...:Alpha(Opacity=20)' |  | xxxx | 1 | 1 | 0.2 | 1
24 | -ms-filter='progid:...:Alpha(Opacity=100)' |  | xxxx | 1 | 1 | 1 | 1
25 | opacity:0 |  | xxxx | 1 | 1 | 1 | 0
26 | opacity:0.5 |  | xxxx | 1 | 1 | 1 | 0.5
27 | opacity:1 |  | xxxx | 1 | 1 | 1 | 1
28 | opacity:0 | container opacity:0 | xxxx | 1 | 1 | 1 | 0
29 | opacity:0.5 | container opacity:0 | xxxx | 1 | 1 | 1 | 0
30 | opacity:1 | container opacity:0 | xxxx | 1 | 1 | 1 | 0
31 | opacity:0 | container opacity:0.5 | xxxx | 1 | 1 | 1 | 0
32 | opacity:0.5 | container opacity:0.5 | xxxx | 1 | 1 | 1 | 0.25
33 | opacity:1 | container opacity:0.5 | xxxx | 1 | 1 | 1 | 0.5
34 | opacity:0 | container opacity:1 | xxxx | 1 | 1 | 1 | 0
35 | opacity:0.5 | container opacity:1 | xxxx | 1 | 1 | 1 | 0.5
36 | opacity:1 | container opacity:1 | xxxx | 1 | 1 | 1 | 1