opacity

Übersicht

Die opacity Eigenschaft legt die Transparenz (Deckkraft) eines Elements fest.

  • Standardwert 1.0
  • Anwendbar auf Alle Elemente
  • Vererbt Nein
  • Prozentwerte
  • Medium visuell
  • Berechneter Wert the specified value, clipped in the range [0,1]
  • Animierbar Ja, als Nummer
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

opacity: <number>

Werte

0
Das Element ist komplett unsichtbar (transparent).
0.5
Das Element ist halb durchsichtig.
1
Standardwert. Das Element ist komplett sichtbar (deckend).
inherit
Der Wert des Elternelements wird geerbt.

Beispiele

Kompatibles Beispiel für Firefox, Opera, Safari und Internet Explorer:

pre {                               /* 20% Deckkraft */
   border: solid red;
   opacity: 0.2;                    /* Firefox, Safari und Chrome (WebKit), Opera */
   filter: alpha(opacity=20);       /* IE */
   zoom: 1;                         /* "hasLayout" für IE 7 und älter */ 
}
pre {                               /* 50% Deckkraft */
   border: solid red;
   opacity: 0.5;                    /* Firefox, Safari und Chrome (WebKit), Opera */
   filter: alpha(opacity=50);       /* IE */
   zoom: 1;                         /* "hasLayout" für IE 7 und älter */ 
}
pre {                               /* 80% Deckkraft */
   border: solid red;
   opacity: 0.8;                    /* Firefox, Safari und Chrome (WebKit), Opera */
   filter: alpha(opacity=80);       /* IE */
   zoom: 1;                         /* "hasLayout" für IE 7 und älter */ 
}

Hinweise

  • Noch vor Mozilla 1.7 (Firefox 0.9) wurde die -moz-opacity Eigenschaft eingeführt.
    Mit Mozilla 1.7 (Firefox 0.9) wurde diese Eigenschaft zu opacity umbenannt und -moz-opacity wurde nur noch als Alias von opacity unterstützt.
  • Gecko 1.9.1 (Firefox 3.5) und spätere Versionen unterstützen die Eigenschaft -moz-opacity nicht mehr. Stattdessen muss opacity verwendet werden.

Spezifikation

Spezifikation Status Anmerkung
CSS Transitions Working Draft opacity ist annimerbar
CSS Color Module Level 3 Recommendation Standardwert

Browser Kompatibilität

Browser ab Version Unterstützung von
Internet Explorer
4.0 filter: alpha(opacity=xx)
8.0 filter: alpha(opacity=xx)
filter: "alpha(opacity=xx)"
Firefox (Gecko) 0.9 (1.7) opacity
Opera 9.0 opacity
Safari | Chrome | WebKit 1.2 | 1.0 | 125 opacity
  • Der Internet Explorer unterstützt auch eine erweiterte Form: progid:DXImageTransform.Microsoft.Alpha(Opacity=xx). Diese Form ist überflüssig und daher nicht zu empfehlen.
  • Im IE8 existiert ferner die gleichbedeutende Eigenschaft -ms-filter. Die Verwendung dieses Präfix ist nicht zu empfehlen und ebenfalls überflüssig.
  • Genau wie -moz-opacity ist -khtml-opacity seit der Veröffentlichung von Safari 1.2 (2004) überflüssig. Konqueror unterstütze die Eigenschaft -khtml-opacity nie und benutzt ebenfalls opacity seit der Version 4.0. Die Eigenschaften -khtml-opacity und -moz-opacity werden nicht unterstützt und sollten nicht verwendet werden!

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: fscholz
Zuletzt aktualisiert von: fscholz,
Seitenleiste ausblenden