opacity

<alpha-value>

Eine <number> im Bereich von 0.0 bis 1.0, einschließlich, oder ein <percentage> im Bereich von 0% bis 100%, einschließlich, die die Opazität des Kanals (das heißt, den Wert seines Alphakanals) darstellt. Jeder Wert außerhalb des Intervalls, obwohl gültig, wird auf das nächste Limit im Bereich begrenzt.

Wert	Bedeutung
0	Das Element ist vollständig transparent (d.h. unsichtbar).
Jede <number> exakt zwischen 0 und 1	Das Element ist durchscheinend (d.h. der Inhalt hinter dem Element ist sichtbar).
1 (Standardwert)	Das Element ist vollständig undurchsichtig (visuell solide).

opacity gilt für das gesamte Element, einschließlich seines Inhalts, obwohl der Wert nicht von Kindelementen geerbt wird. Daher haben das Element und seine Kinder alle die gleiche Opazität relativ zum Hintergrund des Elements, auch wenn sie unterschiedliche Opazitäten relativ zueinander haben.

Um nur die Opazität eines Hintergrunds zu ändern, verwenden Sie die background-Eigenschaft mit einem Farbwert, der einen Alphakanal zulässt. Zum Beispiel:

background: rgb(0 0 0 / 40%);

Wenn der opacity-Wert auf 0 gesetzt ist, erscheinen das Element und alle seine Kinder unsichtbar, sind aber weiterhin Teil des DOMs. Das bedeutet, dass sie weiterhin Zeigervorgänge registrieren und, wenn die Elemente in einer Tab-Reihenfolge sind, sie den Fokus erhalten. Für eine gute Benutzerfreundlichkeit sollten solche Elemente sichtbar gemacht werden, wenn sie Benutzerinteraktionen erhalten, oder verwenden Sie die CSS-pointer-events-Eigenschaft, um Zeigervorgänge zu deaktivieren, und nehmen Sie das Element aus der Tab-Reihenfolge, indem Sie es mit dem disabled-Attribut deaktivieren oder tab-index="-1" für nicht formularbezogene interaktive Elemente setzen.

Die Verwendung von opacity mit einem anderen Wert als 1 platziert das Element in einem neuen Stacking-Kontext.

Opazität allein sollte nicht verwendet werden, um Informationen für Screenreader bereitzustellen. Verwenden Sie das HTML-hidden-Attribut, die CSS-visibility- oder CSS-display-Eigenschaften. Es ist am besten, das aria-hidden-Attribut zu vermeiden, aber wenn das Element mit Opazität versteckt ist, dann verstecken Sie es auch vor Screenreadern.

Beim Übergang der Opazität von Elementen, wenn Sie sie der Seite hinzufügen, wenn der Inhalt zuvor mit visibility: hidden, display: none oder content-visibility: hidden versteckt war, müssen Sie sowohl eine @starting-style als auch transition-behavior: allow-discrete einschließen:

.card {
  transition:
    opacity 5s,
    display 5s;
  background-color: orange;

  transition-behavior: allow-discrete;
  @starting-style {
    opacity: 0;
  }
}

.card.hidden {
  display: none;
  opacity: 0;
}

Um Übergänge im Erst-Stil zu ermöglichen, sind @starting-style-Regeln erforderlich. Im obigen Code bietet das Setzen von opacity: 0 in @starting-style einen Ausgangspunkt für den Übergang, wenn das Element sein Initialstil-Update erhält. Für weitere Details siehe @starting-style.

Das Setzen von transition-behavior: allow-discrete ist erforderlich, um zu display: none zu wechseln. Siehe die transition-behavior-Eigenschaft für weitere Details.

Wenn die Textopazität angepasst wird, ist es wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Textes und dem Hintergrund, über dem der Text platziert ist, hoch genug ist, damit Menschen mit Sehbeeinträchtigungen den Inhalt der Seite lesen können.

Das Farbkontrastverhältnis wird durch den Vergleich der Leuchtkraft der opazitätsangepassten Text- und Hintergrundfarbwerte bestimmt. Um die aktuellen Richtlinien für Barrierefreiheit im Web-Inhalt (WCAG) zu erfüllen, ist ein Verhältnis von 4,5:1 für Textinhalte und 3:1 für größeren Text wie Überschriften erforderlich. Großer Text wird als 18.66px und fett oder größer, oder 24px oder größer definiert.

• WebAIM: Color Contrast Checker
• MDN Verständnis von WCAG, Leitfaden 1.4 Erklärungen
• Verständnis des Erfolgskriteriums 1.4.3 | W3C-Verständnis von WCAG 2.0

Verschiedene Betriebssysteme bieten eine Präferenz zur Reduzierung der Transparenz. Um die opacity basierend auf den Transparenzeinstellungen des Betriebssystems des Benutzers festzulegen, verwenden Sie die prefers-reduced-transparency-Media-Abfrage.

opacity = 
  <opacity-value>  

<opacity-value> = 
  <number>      |
  <percentage>  

Das folgende Beispiel zeigt, wie die opacity-Eigenschaft die Opazität des gesamten Elements und Inhalts ändert und somit den Text sehr schwer lesbar macht.

HTML

<div class="light">You can barely see this.</div>
<div class="medium">This is easier to see.</div>
<div class="heavy">This is very easy to see.</div>

CSS

div {
  background-color: yellow;
  font-weight: bold;
  font-size: 130%;
}
.light {
  opacity: 0.2; /* Barely see the text over the background */
}
.medium {
  opacity: 0.5; /* See the text more clearly over the background */
}
.heavy {
  opacity: 0.9; /* See the text very clearly over the background */
}

Ergebnis

Im folgenden Beispiel wird die Opazität beim Hover geändert, sodass das gestreifte Hintergrundbild des Elternelements durch das Bild hindurch sichtbar wird.

HTML

<div class="wrapper">
  <img
    src="/shared-assets/images/examples/dino.svg"
    alt="MDN Dino"
    width="128"
    height="146"
    class="opacity" />
</div>

CSS

img.opacity {
  opacity: 1;
}

img.opacity:hover {
  opacity: 0.5;
}

.wrapper {
  width: 200px;
  height: 160px;
  background-color: #f03cc3;
  background-image: linear-gradient(
    90deg,
    transparent 50%,
    rgb(255 255 255 / 50%) 50%
  );
  background-size: 20px 20px;
}

Ergebnis

Um Elemente basierend auf den Transparenzeinstellungen des Betriebssystems des Benutzers zu stylen, verwenden Sie die prefers-reduced-transparency-Media-Abfrage. Das folgende Beispiel zeigt, wie Sie die prefers-color-scheme-Media-Abfrage verwenden, um die gewünschte opacity basierend auf den Präferenzen des Benutzers festzulegen.

.element {
  opacity: 0.5;
}

@media (prefers-reduced-transparency) {
  .element {
    opacity: 1;
  }
}

• prefers-reduced-transparency-Media-Abfrage
• CSS-Farben-Modul
• SVG-opacity-Attribut