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 repräsentiert (das heißt, den Wert seines Alpha-Kanals). Jeder Wert außerhalb des Intervalls, obwohl gültig, wird auf das nächste Limit im Bereich geklammert.

Wert	Bedeutung
0	Das Element ist vollständig transparent (d.h. unsichtbar).
Jede <number> strikt 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, auch wenn der Wert nicht von Kindelementen geerbt wird. Somit haben das Element und seine Kinder alle die gleiche Opazität im Verhältnis zum Hintergrund des Elements, auch wenn sie unterschiedliche Opazitäten zueinander haben.

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

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

Wenn der opacity-Wert auf 0 gesetzt wird, erscheinen das Element und alle seine Kinder unsichtbar, sind aber immer noch Teil des DOM. Das bedeutet, dass sie weiterhin Zeigerereignisse registrieren, und wenn die Elemente in einer Tabulatorreihenfolge sind, erhalten sie auch den Fokus. Für eine gute Benutzerfreundlichkeit stellen Sie sicher, dass solche Elemente sichtbar werden, wenn sie Benutzerinteraktionen erhalten, oder verwenden Sie die CSS-Eigenschaft pointer-events, um Zeigerereignisse zu deaktivieren, und nehmen Sie das Element aus der Tabulatorreihenfolge, 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 Context.

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

Wenn Sie die Opazität von Elementen beim Hinzufügen zur Seite übergehen, wenn der Inhalt zuvor mit visibility: hidden, display: none oder content-visibility: hidden verborgen wurde, müssen Sie sowohl einen @starting-style als auch transition-behavior: allow-discrete einbeziehen:

.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 ersten Stil zu aktivieren, 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 seine anfängliche Stilaktualisierung erhält. Für weitere Details siehe @starting-style.

Das Setzen von transition-behavior: allow-discrete ist erforderlich, um zu display: none überzugehen. 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 Personen mit Sehbehinderungen den Inhalt der Seite lesen können.

Das Farbschema-Kontrastverhältnis wird bestimmt, indem die Helligkeit der opacitätsangepassten Text- und Hintergrundfarbenwerte verglichen wird. Um die aktuellen Web Content Accessibility Guidelines (WCAG) zu erfüllen, ist ein Verhältnis von 4.5:1 für Textinhalt und 3:1 für größere Texte wie Überschriften erforderlich. Große Texte sind definiert als 18,66px und fett oder größer oder 24px oder größer.

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Richtlinie 1.4 Erklärungen
• Verstehen von Erfolgskriterium 1.4.3 | W3C Verständnis der 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 Medienabfrage prefers-reduced-transparency.

opacity = 
  <opacity-value>  

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

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

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 im übergeordneten Element durch das Bild 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 Medienabfrage prefers-reduced-transparency. Das folgende Beispiel zeigt, wie Sie die Medienabfrage prefers-color-scheme 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 Medienabfrage
• CSS Farbmodul
• SVG opacity Attribut