Lädt...

CSS-Deckkraft (Opacity)

Sie kennen Vollton, Fotos und Verläufe. Manchmal soll das ganze Element weicher wirken — eine gedämpfte Schicht, ein deaktivierter Button, eine Karte, die zurücktritt. Das ist die Aufgabe von opacity: wie deckend oder durchscheinend die ganze Box wirkt.

Was macht opacity?

Die Eigenschaft opacity setzt, wie undurchsichtig ein Element ist. Der Wert läuft von 1 (voll deckend, oft der Standard) bis 0 (völlig unsichtbar). Dezimalwerte wie 0.5 liegen dazwischen. Wichtig: Opacity gilt für das Element und alles darin — Text, Rahmen, Hintergründe und Kindboxen verblassen gemeinsam.

Opacity vs. Farb-Alpha

Diese beiden Ideen werden leicht vermischt. Trennen Sie sie.

📊 Opacity vs. Farb-Alpha

Werkzeug Was verblasst Typische Nutzung
opacity Das ganze Element (und seine Kinder) Weiche Overlays, Disabled-Look, später Fade-Motion
rgba() / hsla()-Alpha Nur diese Farbschicht Transparente Hintergründe mit solidem Text oben
Schlüsselwort transparent Ein völlig klarer Farbwert Rahmenfarbe verstecken ohne die Eigenschaft zu entfernen
visibility: hidden Visuell verborgen, Layout bleibt Anderes Werkzeug — hier nicht vertieft

Voll deckend und halb verblasst

Vergleichen Sie zuerst 1 und 0.5 am gleichen Kartendesign.

Deckend vs. halbe Opacity

css
CSS Code 
.card-solid {
opacity: 1;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}

.card-soft {
opacity: 0.5;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}

Was Sie sehen sollten

Bei .card-soft wirken Hintergrund und Text ausgewaschen. Opacity verschont die Buchstaben nicht.

Kinder verblassen mit dem Elternteil

Hat ein Elternteil opacity: 0.4, können verschachtelte Überschriften und Buttons nicht mit eigenem opacity: 1 „aussteigen“. Sie werden bereits in einer verblassten Schicht gemalt.

Eltern-Opacity wäscht Kinder

css
CSS Code 
.overlay {
opacity: 0.4;
background-color: #0f172a;
color: white;
padding: 1rem;
}

.overlay strong {
opacity: 1; /* stellt volle Stärke in einem verblassten Elternteil nicht wieder her */
}

Design-Implikation

Frostiges Panel mit scharfem Text? Lassen Sie die Hintergrundfarbe mit rgba weicher werden, nicht das ganze Element mit opacity.

Lieber rgba, wenn nur die Füllung weicher werden soll

Hier ist der Panel-Hintergrund durchscheinend, der Text bleibt voll deckend.

Weiche Füllung, solider Text

css
CSS Code 
.panel {
background-color: rgba(15, 118, 110, 0.25);
color: #042f2e; /* Text in voller Stärke */
padding: 1rem;
}

Gedämpfte UI-Gewohnheit

Häufig: etwas niedrigere Opacity auf sekundären Aktionen oder deaktivierten Controls, damit sie ruhiger wirken — Kontrast trotzdem lesbar halten.

Gedämpfter Sekundärbutton

css
CSS Code 
.btn-secondary {
opacity: 0.75;
background-color: #e2e8f0;
color: #0f172a;
border: none;
padding: 0.5rem 1rem;
}

Null ist unsichtbar — Platz kann bleiben

opacity: 0 macht das Element unsichtbar, aber es kann weiterhin Layoutplatz belegen und je nach Kontext Zeigerevents empfangen. Soll es aus dem Layout verschwinden, brauchen Sie ein anderes Werkzeug (display: none), nicht nur Opacity.

Unsichtbar, aber noch im Fluss

css
CSS Code 
.ghost {
opacity: 0;
}

Selbst ausprobieren

  1. Zwei Karten mit denselben Farben; eine opacity: 1, eine opacity: 0.5.
  2. Eine fette Zeile in einem Elternteil mit opacity: 0.4 — Kind lässt sich nicht voll „entfaden“.
  3. Den weichen Look mit background-color: rgba(…, 0.25) und solidem color neu bauen.
  4. Sekundärbutton bei opacity: 0.75 und Lesbarkeit prüfen.
  5. Optional: opacity: 0 auf eine Box — bemerken Sie die Lücke im Layout.

Häufige Fehler

  • opacity auf dem Elternteil, obwohl nur ein transparenter Hintergrund gewollt war
  • Erwarten, dass ein Kind mit opacity: 1 in einem verblassten Elternteil voll deckend wirkt
  • opacity: 0 als Ersatz für Layout-Entfernung
  • Opacity so niedrig, dass Textkontrast scheitert
  • Das Schlüsselwort transparent mit der Eigenschaft opacity verwechseln

Kurz

  • opacity setzt, wie durchscheinend das ganze Element ist (0–1)
  • Kinder verblassen mit dem Elternteil — von innen nicht voll umkehrbar
  • Für weiche Hintergründe mit solidem Text: rgba / hsla-Alpha bevorzugen
  • Niedrige Opacity kann UI dämpfen; Barrierefreiheit beachten
  • Unsichtbar (0) ist nicht aus dem Layout entfernt
  • Kartenpaar und rgba-Neubau üben, bis der Unterschied klar sitzt

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
8
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Css Tutorial