Deckkraft - CSS-Tricks | CSS-Almanach 2025

Die opacityEigenschaft in CSS gibt an, wie transparent ein Element ist.

Grundlegende Verwendung:

div ( opacity: 0.5; )

Die Deckkraft hat einen Standardanfangswert von 1 (100% undurchsichtig). Die Deckkraft wird nicht vererbt, sondern weil das übergeordnete Element eine Deckkraft hat, die für alles darin gilt. Sie können ein untergeordnetes Element nicht ohne Tricks weniger transparent als das übergeordnete Element machen. Die Werte sind eine Zahl von 0 bis 1, die die Deckkraft des Kanals (des „Alpha“ -Kanals) darstellt. Wenn ein Element den Wert 0 hat, ist das Element vollständig unsichtbar. Ein Wert von 1 ist vollständig undurchsichtig (fest).

Schauen Sie sich diesen Stift an!

IE-Kompatibilität

Wenn Sie möchten, dass die Deckkraft in allen IE-Versionen funktioniert, sollte die Reihenfolge wie folgt lauten:

.opaque ( /* Theoretically for IE 8 & 9 (more valid) */ /*… but not required as filter works too */ /* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 /* This works in IE 8 & 9 too */ /*… but also 5, 6, 7 */ filter: alpha(opacity=50); // IE 5-7 /* Modern Browsers */ opacity: 0.5; )

Wenn Sie diese Reihenfolge nicht verwenden, wendet IE8-as-IE7 die Deckkraft nicht an, obwohl IE8 und ein reiner IE7 dies tun.

Hinweis zum Stapeln von Kontexten

Wenn ein Element mit opacityeinem Wert von weniger als 1 positioniert ist, gilt die z-indexEigenschaft wie in CSS2.1 beschrieben, außer dass der autoWert als 0 behandelt wird, da immer ein neuer Stapelkontext erstellt wird.

Opazität kann als Alternative zur visibilityEigenschaft verwendet werden: visibility: hidden;ist genau wie opacity: 0;.