CSS: Transparenz bzw. Opazität

Über die CSS-Eigenschaft opacity lässt sich die Opazität eines Objekts einstellen. Die Opazität oder ›Deckkraft‹ eines Objekts ist nichts anderes als die umgekehrte Transparenz desselben. Mathematisch ausgedrückt entspricht eine Opazität von 100 % einer Transparenz von 0 % und umgekehrt. Die Eigenschaft opacity erwartet einen Wert zwischen 0 und 1, wobei 1 einer Opazität von 100 % entspricht. Alle aktuellen Browser unterstützen diese Eigenschaft. MSIE unterstützt die Eigenschaft erst seit Version 9.

Das folgende Beispiel soll dies verdeutlichen:

<p style='margin-top:50px;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<div style='opacity:.3;margin-left:50px;margin-top:-60px;width:200px;height:100px;background-color:red;'></div>
<div style='opacity:.8;margin-left:150px;margin-top:-90px;width:200px;height:100px;background-color:green;'></div>

Der Code bewirkt die unten stehende Darstellung. Wird der Text vollständig von den farbigen Boxen verdeckt, so unterstützt der von Ihnen verwendete Browser die Eigenschaft opacity nicht.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.