IE8 and alpha opacity filter

IE8 supports (like the previous IE versions) the proprietary MS alpha opacity filter, with both the old syntax and a new one, -ms-filter: "alpha(opacity=x)".

In previous versions of IE this filter has an effect similar to the CSS3 opacity property: it is applied to a whole element, including all its descendants. In IE8 the opacity is NOT applied to descendants with non static position.

Below there are two groups of five test cases each. In each test case a white background div is over a red background one. In the different 5 cases the white div has different values of opacity, applied with the CSS3 opacity property and with the MS alpha filter for IE. Inside the white div there is a green background one, which has position:relative only in the second group of test cases.

In the second group the green child has always full (100%) opacity in IE8. Not so in IE7- and most other browsers where it takes the same (?) opacity of its parent. Also in Opera 10.10- the two groups are not rendered the same: here the green child in the second group is not fully opaque (like in IE8), but its transparency is not the same as in the first group; in other words position:relative seems to have an effect on the opacity; the problem is fixed in Opera 10.50.

This red div is overlayed by a white one with opacity: 1.00. Sempre caro mi fu quest’ermo colle, E questa siepe, che da tanta parte De l’ultimo orizzonte il guardo esclude. Ma sedendo e mirando, interminato Spazio di là da quella, e sovrumani Silenzi, e profondissima quiete Io nel pensier mi fingo, ove per poco Il cor non si spaura.
This is a white div with opacity: 1.00.
This is a green child of the white div.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc
This red div is overlayed by a white one with opacity: 0.75. Sempre caro mi fu quest’ermo colle, E questa siepe, che da tanta parte De l’ultimo orizzonte il guardo esclude. Ma sedendo e mirando, interminato Spazio di là da quella, e sovrumani Silenzi, e profondissima quiete Io nel pensier mi fingo, ove per poco Il cor non si spaura.
This is a white div with opacity: 0.75.
This is a green child of the white div.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc
This red div is overlayed by a white one with opacity: 0.50. Sempre caro mi fu quest’ermo colle, E questa siepe, che da tanta parte De l’ultimo orizzonte il guardo esclude. Ma sedendo e mirando, interminato Spazio di là da quella, e sovrumani Silenzi, e profondissima quiete Io nel pensier mi fingo, ove per poco Il cor non si spaura.
This is a white div with opacity: 0.50.
This is a green child of the white div.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc
This red div is overlayed by a white one with opacity: 0.25. Sempre caro mi fu quest’ermo colle, E questa siepe, che da tanta parte De l’ultimo orizzonte il guardo esclude. Ma sedendo e mirando, interminato Spazio di là da quella, e sovrumani Silenzi, e profondissima quiete Io nel pensier mi fingo, ove per poco Il cor non si spaura.
This is a white div with opacity: 0.25.
This is a green child of the white div.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc
This red div is overlayed by a white one with opacity: 0.00. Sempre caro mi fu quest’ermo colle, E questa siepe, che da tanta parte De l’ultimo orizzonte il guardo esclude. Ma sedendo e mirando, interminato Spazio di là da quella, e sovrumani Silenzi, e profondissima quiete Io nel pensier mi fingo, ove per poco Il cor non si spaura.
This is a white div with opacity: 0.00.
This is a green child of the white div.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc
This red div is overlayed by a white one with opacity: 1.00. Sempre caro mi fu quest’ermo colle, E questa siepe, che da tanta parte De l’ultimo orizzonte il guardo esclude. Ma sedendo e mirando, interminato Spazio di là da quella, e sovrumani Silenzi, e profondissima quiete Io nel pensier mi fingo, ove per poco Il cor non si spaura.
This is a white div with opacity: 1.00.
This is a green child of the white div.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc
This red div is overlayed by a white one with opacity: 0.75. Sempre caro mi fu quest’ermo colle, E questa siepe, che da tanta parte De l’ultimo orizzonte il guardo esclude. Ma sedendo e mirando, interminato Spazio di là da quella, e sovrumani Silenzi, e profondissima quiete Io nel pensier mi fingo, ove per poco Il cor non si spaura.
This is a white div with opacity: 0.75.
This is a green child of the white div.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc
This red div is overlayed by a white one with opacity: 0.50. Sempre caro mi fu quest’ermo colle, E questa siepe, che da tanta parte De l’ultimo orizzonte il guardo esclude. Ma sedendo e mirando, interminato Spazio di là da quella, e sovrumani Silenzi, e profondissima quiete Io nel pensier mi fingo, ove per poco Il cor non si spaura.
This is a white div with opacity: 0.50.
This is a green child of the white div.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc
This red div is overlayed by a white one with opacity: 0.25. Sempre caro mi fu quest’ermo colle, E questa siepe, che da tanta parte De l’ultimo orizzonte il guardo esclude. Ma sedendo e mirando, interminato Spazio di là da quella, e sovrumani Silenzi, e profondissima quiete Io nel pensier mi fingo, ove per poco Il cor non si spaura.
This is a white div with opacity: 0.25.
This is a green child of the white div.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc
This red div is overlayed by a white one with opacity: 0.00. Sempre caro mi fu quest’ermo colle, E questa siepe, che da tanta parte De l’ultimo orizzonte il guardo esclude. Ma sedendo e mirando, interminato Spazio di là da quella, e sovrumani Silenzi, e profondissima quiete Io nel pensier mi fingo, ove per poco Il cor non si spaura.
This is a white div with opacity: 0.00.
This is a green child of the white div.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc

CSS tests home