Ausführbare CSS-Docs: CSS Transparenz

Q: Was macht opacity in CSS?

Es legt fest, wie durchsichtig ein Element ist, von 0 (vollständig transparent) bis 1 (vollständig deckend). Es gilt für das ganze Element, einschließlich Text, Rahmen, Bildern und aller Kinder, als eine zusammengefasste Ebene.

Q: Wie mache ich nur den Hintergrund transparent, nicht den Text?

Lass opacity in Ruhe und gib dem Hintergrund eine Farbe mit Alpha: background-color: rgb(37 99 235 / 0.5); oder rgba(37, 99, 235, 0.5). Text und Kinder bleiben vollständig deckend.

Q: Was ist der Unterschied zwischen opacity: 0, visibility: hidden und display: none?

opacity: 0 versteckt das Element, aber es nimmt weiterhin Platz ein, lässt sich anklicken und wird von Screenreadern gelesen. visibility: hidden behält den Platz, ist aber weder anklickbar noch wird es gelesen. display: none entfernt es vollständig aus dem Layout.

Q: Kann opacity ein Prozentwert sein?

Ja. opacity: 50% ist in allen aktuellen Browsern dasselbe wie opacity: 0.5. Werte unter 0 oder über 1 werden auf diesen Bereich begrenzt.

Was opacity macht

opacity legt fest, wie durchsichtig ein Element ist: 1 ist deckend (der Standard), 0 unsichtbar, und alles dazwischen lässt den Hintergrund durchscheinen. Die Boxen unten stehen auf einem gestreiften Hintergrund, damit du es siehst:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Opacity</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .bg {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #ffffff 10px 20px);
    }
    .box { width: 90px; height: 70px; background: #2563eb; color: white; display: grid; place-items: center; font-weight: 700; }
  </style>
</head>
<body>
  <div class="bg">
    <div class="box" style="opacity: 1">1</div>
    <div class="box" style="opacity: 0.75">0.75</div>
    <div class="box" style="opacity: 0.5">0.5</div>
    <div class="box" style="opacity: 0.25">0.25</div>
    <div class="box" style="opacity: 0">0</div>
  </div>
</body>
</html>

Die letzte Box ist noch da: Sie belegt ihren 90px-Platz in der Reihe, zeichnet nur nichts. Achte darauf, dass die weißen Zahlen mit ihren Boxen verblassen. opacity gilt für das Element und alles darin.

Transparenter Hintergrund, deckender Text

Weil opacity auch die Kinder ausblendet, ist es das falsche Werkzeug für „ein durchsichtiger Hintergrund hinter lesbarem Text“. Nimm stattdessen eine Hintergrundfarbe mit Alphakanal:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background alpha</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .bg { padding: 16px; background: repeating-linear-gradient(45deg, #f59e0b 0 10px, #ffffff 10px 20px); }
    .card { padding: 14px; margin-bottom: 10px; color: #111827; font-weight: 700; }
    .with-opacity { background: #ffffff; opacity: 0.6; }
    .with-alpha { background: rgb(255 255 255 / 0.6); }
  </style>
</head>
<body>
  <div class="bg">
    <div class="card with-opacity" id="a">opacity: 0.6 (text fades too)</div>
    <div class="card with-alpha" id="b">background alpha 0.6 (text stays solid)</div>
  </div>
  <p id="out"></p>
  <script>
    const s = (id) => getComputedStyle(document.getElementById(id));
    document.getElementById('out').textContent =
      'first: opacity ' + s('a').opacity + '  |  second: opacity ' + s('b').opacity + ', background ' + s('b').backgroundColor;
  </script>
</body>
</html>

Bei beiden weißen Panels scheinen die Streifen gleich stark durch. Beim ersten verblasst der Text mit dem Panel. Beim zweiten ist nur die Hintergrundfarbe transparent (rgb(255 255 255 / 0.6), dasselbe wie rgba(255, 255, 255, 0.6)), also bleibt der Text deckend und gut lesbar. Farben mit Alpha behandelt die Seite zu Farben.

Ein Kind kann der opacity seines Elternelements nicht entkommen: opacity: 1 am Kind bewirkt nichts, weil das Elternelement als eine verblasste Ebene gezeichnet wird, in der das Kind schon steckt.

Werte

Wert	Ergebnis
`1` oder `100%`	vollständig deckend (Standard)
`0.5` oder `50%`	halb transparent
`0` oder `0%`	vollständig transparent, weiterhin im Layout und anklickbar
`1.5`, `-1`	auf `1` und `0` begrenzt

Opacity wird optisch vererbt, aber nicht als Eigenschaft: Die berechnete opacity eines Kindes bleibt 1, während es innerhalb eines verblassten Elternelements gezeichnet wird.

opacity: 0 vs. visibility: hidden vs. display: none

Alle drei lassen ein Element verschwinden, unterscheiden sich aber in allem anderen:

	`opacity: 0`	`visibility: hidden`	`display: none`
Nimmt Platz ein	ja	ja	nein
Empfängt Klicks und Fokus	ja	nein	nein
Von Screenreadern gelesen	ja	nein	nein
Lässt sich per Transition animieren	ja, weich	schaltet an einem Ende um, kein Ausblenden	nein

Der Unterschied, der Ärger macht, steht in der zweiten Zeile. Ein Button mit opacity: 0 lässt sich weiterhin anklicken und per Tab erreichen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden but clickable</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 10px; }
    .row button { width: 150px; height: 40px; font: inherit; }
  </style>
</head>
<body>
  <div class="row">
    <button id="o" style="opacity: 0">opacity: 0</button>
    <button id="v" style="visibility: hidden">visibility: hidden</button>
    <button id="d" style="display: none">display: none</button>
    <button id="shown">Visible</button>
  </div>
  <p id="out"></p>
  <script>
    const hit = (id) => {
      const r = document.getElementById(id).getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 10, r.top + 10);
      return id + ': ' + (top && top.id === id ? 'clickable' : 'not clickable');
    };
    document.getElementById('out').textContent = [hit('o'), hit('v')].join('  |  ') +
      '  |  the Visible button starts at x = ' + document.getElementById('shown').offsetLeft + 'px';
  </script>
</body>
</html>

Die Anzeige fragt den Browser, welches Element unter einem Punkt in jedem versteckten Button liegt. Der Button mit opacity: 0 antwortet „clickable“; der mit visibility: hidden nicht. Der sichtbare Button beginnt nach zwei leeren Plätzen von 150px, weil nur der Button mit display: none seinen Platz zurückgegeben hat. Um etwas auszublenden und dann zu entfernen, animiere opacity und setz am Ende visibility: hidden.

Einblenden beim Hovern

opacity ist eine der günstigsten Eigenschaften zum Animieren und deshalb der Standardweg, Dinge ein- und auszublenden. Eine Bildunterschrift, die über einem Bild erscheint:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover fade</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tile { position: relative; width: 240px; height: 150px; background: linear-gradient(135deg, #2563eb, #16a34a); }
    .caption {
      position: absolute;
      inset: auto 0 0 0;
      padding: 10px;
      background: rgb(17 24 39 / 0.8);
      color: white;
      opacity: 0;
      transition: opacity 0.25s ease-out;
    }
    .tile:hover .caption, .tile:focus-within .caption { opacity: 1; }
  </style>
</head>
<body>
  <a class="tile" href="#" style="display: block">
    <span class="caption">Caption appears on hover and focus</span>
  </a>
</body>
</html>

:focus-within zeigt die Bildunterschrift auch Tastaturnutzern. Denk an die Tabelle oben: Solange sie unsichtbar ist, wird die Bildunterschrift trotzdem von Screenreadern gelesen, und bei einer Bildunterschrift willst du genau das.

Barrierefreiheit: verblasster Text verliert Kontrast

Weniger opacity heißt weniger Kontrast. Grauer Text auf Weiß mit opacity: 0.5 kann weit unter das Verhältnis von 4,5:1 fallen, das Fließtext braucht. Für Nebentext wähl eine Farbe, die den Kontrasttest besteht, statt eine dunkle auszublenden. Bei deaktivierten Bedienelementen ist reduzierte opacity ein verbreitetes Signal, aber kombiniere sie mit dem Attribut disabled, damit das Element auch per Tastatur nicht erreichbar ist und als deaktiviert angesagt wird.

Nebenwirkung: Stacking Context

Jede opacity unter 1 erzeugt einen neuen Stacking Context, so wie transform. Kinder mit hohem z-index stapeln sich dann nur innerhalb des verblassten Elements und können nicht über Elemente außerhalb davon steigen. Rutscht ein Dropdown in einem verblassten Panel unter ein anderes Element, ist das der Grund (die Seite zu z-index erklärt das Stapeln).

Häufige Fehler

Eine Karte ausblenden, um ihren Hintergrund transparent zu machen. Der Text verblasst mit. Nimm rgb(... / 0.5) am Hintergrund.
Versuchen, ein Kind wieder deckend zu machen. Die opacity des Elternelements begrenzt jedes Kind.
Nur mit opacity: 0 verstecken. Das Element empfängt weiterhin Klicks und Fokus. Füge visibility: hidden hinzu oder nimm display: none (pointer-events: none stoppt Klicks, aber nicht den Tastaturfokus).
opacity: 50 schreiben. Opacity geht von 0 bis 1; 50 wird auf 1 begrenzt. Schreib 0.5 oder 50%.
Text mit wenig Kontrast durch opacity. Prüf den Kontrast des Ergebnisses, nicht den der ursprünglichen Farbe.

Häufig gestellte Fragen

Was macht opacity in CSS?

Es legt fest, wie durchsichtig ein Element ist, von 0 (vollständig transparent) bis 1 (vollständig deckend). Es gilt für das ganze Element, einschließlich Text, Rahmen, Bildern und aller Kinder, als eine zusammengefasste Ebene.

Wie mache ich nur den Hintergrund transparent, nicht den Text?

Lass opacity in Ruhe und gib dem Hintergrund eine Farbe mit Alpha: background-color: rgb(37 99 235 / 0.5); oder rgba(37, 99, 235, 0.5). Text und Kinder bleiben vollständig deckend.

Kann ein Kindelement deckender sein als sein Elternelement?

Nein. Die opacity eines Elternelements gilt für die ganze Gruppe, also kann opacity: 1 an einem Kind sie nicht aufheben. Ein Kind eines Elternelements mit 0.5 wird höchstens halb deckend gezeichnet. Verlege die Transparenz stattdessen in die Hintergrundfarbe des Elternelements.

Was ist der Unterschied zwischen opacity: 0, visibility: hidden und display: none?

opacity: 0 versteckt das Element, aber es nimmt weiterhin Platz ein, lässt sich anklicken und wird von Screenreadern gelesen. visibility: hidden behält den Platz, ist aber weder anklickbar noch wird es gelesen. display: none entfernt es vollständig aus dem Layout.

Kann opacity ein Prozentwert sein?

Ja. opacity: 50% ist in allen aktuellen Browsern dasselbe wie opacity: 0.5. Werte unter 0 oder über 1 werden auf diesen Bereich begrenzt.

Verwandte Konzepte