CSS opacity, rgba colors, semi-transparent backgrounds

A.100 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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
A.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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
A.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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
A.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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
A.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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
B.100 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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
B.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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
B.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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
B.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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
B.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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
C.100 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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
C.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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
C.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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
C.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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
C.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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
D.100 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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
D.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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
D.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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
D.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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao
D.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
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nunc nulla, lobortis eu
miao

In the above test cases a white absolutely positioned box is above a red one (and contains a small green one). Different level of opacity (100%, 75%, 50%, 25%, 0) are applied to the white box, with different methods:

  1. In the first row (A) the opacity is applied with the CSS3 opacity property, and with filter:alpha(opacity=) for IE8-. This applies the opacity to the whole box, including its descendants and of course the included text. But not in IE8: here the descendants do not get the opacity applied to the parent.
  2. In the second row (B) the opacity is applied assigning a CSS3 RGBA background color with the A (alpha) component set. Works only in Gecko 1.9+, Safari, Opera 10. This of course applies the opacity only to the background, not to the content (this is frequently the desired effect.)
  3. In the third row (C) the opacity is applied assigning a PNG background image with the desired opacity; for IE7- an gradient filter is applied which allows to specify an alpha value for the start and end colors. This of course applies the opacity only to the background, not to the content (should have the same effect as in the above row). The IE filter may cause problems with links in the box.
  4. In the fourth row (D) a GIF background image is used, composed of white and full transparent pixels in different proportions arranged in a grid. The effect is not so nice, but there are no compatibility problems.

A variant of this page where in the case C for IE7- an AlphaImageLoader filter is used instead of the gradient one.

CSS tests home