opacity

<alpha-value>

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

Wert	Bedeutung
0	Das Element ist vollständig transparent (das heißt, unsichtbar).
Jeder <number> strikt zwischen 0 und 1	Das Element ist durchscheinend (das heißt, der Inhalt hinter dem Element ist sichtbar).
1 (Standardwert)	Das Element ist vollständig opak (visuell fest).

opacity bezieht sich auf das gesamte Element, einschließlich seines Inhalts, auch wenn der Wert nicht von Kindelementen geerbt wird. Somit haben das Element und seine Kinder alle die gleiche Opazität relativ zum Hintergrund des Elements, auch wenn sie unterschiedliche Opazitäten zueinander haben.

Um nur die Opazität eines Hintergrunds zu ändern, verwenden Sie die background Eigenschaft mit einem Farbwert, der einen Alpha-Kanal 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, aber sie sind immer noch Teil des DOM. Das bedeutet, dass sie immer noch Pointer-Ereignisse registrieren und, wenn die Elemente in einer Tab-Reihenfolge sind, fokussiert werden. Aus Gründen der Benutzerfreundlichkeit stellen Sie sicher, dass solche Elemente sichtbar werden, wenn sie Benutzerinteraktionen erhalten, oder verwenden Sie die CSS-Eigenschaft pointer-events, um Pointer-Ereignisse zu deaktivieren und das Element aus der Tab-Reihenfolge zu entfernen, indem Sie das 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 Bildschirmlesegeräten Informationen bereitzustellen. Verwenden Sie das HTML hidden Attribut, die CSS-Eigenschaften visibility oder display. Es ist am besten, das Attribut aria-hidden zu vermeiden, aber wenn das Element mit Opazität versteckt ist, dann verstecken Sie es auch vor Bildschirmlesegeräten.

Beim Übergang der Opazität von Elementen, wenn Sie sie zur Seite hinzufügen und der Inhalt zuvor mit visibility: hidden, display: none oder content-visibility: hidden versteckt war, müssen Sie sowohl einen @starting-style als auch ein transition-behaviour: 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 des ersten Stils zu aktivieren, sind @starting-style Regeln erforderlich. Im obigen Code bietet das Setzen von opacity: 0 im @starting-style einen Ausgangspunkt für den Übergang, wenn das Element seinen initialen Stil-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. Weitere Details finden Sie in der transition-behavior Eigenschaft.

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 bestimmt, indem die Leuchtkraft der opazitätsangepassten Text- und Hintergrundfarbenwerte verglichen wird. Um die aktuellen Richtlinien für barrierefreie Webinhalte (WCAG) zu erfüllen, ist ein Verhältnis von 4,5:1 für Textinhalte und 3:1 für größere Texte wie Überschriften erforderlich. Großer Text wird definiert als 18.66px und fett oder größer, oder 24px oder größer.

• WebAIM: Kontrastprüfer für Farben
• MDN Verständnis von WCAG, Erklärung der Richtlinie 1.4
• Verständnis des Erfolgskriteriums 1.4.3 | W3C Understanding WCAG 2.0

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

opacity = 
  <opacity-value>  

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

Das folgende Beispiel illustriert, wie die opacity Eigenschaft die Opazität des gesamten Elements und des Inhalts ändert und so 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, so dass das gestreifte Hintergrundbild auf dem Elternelement durch das Bild hindurch sichtbar wird.

HTML

<div class="wrapper">
  <img
    src="//interactive-examples.mdn.mozilla.net/media/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 Transparenzpräferenzen des Betriebssystems des Benutzers zu stylen, verwenden Sie die prefers-reduced-transparency Medienabfrage. Das folgende Beispiel zeigt, wie die Medienabfrage prefers-color-scheme verwendet werden kann, 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 Medienabfrage
• CSS-Farbmodul
• SVG opacity Attribut