opacity

Probieren Sie es aus

opacity: 0;

opacity: 0.33;

opacity: 1;

<section class="default-example" id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

#example-element {
  background-color: #963770;
  color: white;
  padding: 1em;
}

Syntax

opacity: 0.9;
opacity: 90%;

/* Global values */
opacity: inherit;
opacity: initial;
opacity: revert;
opacity: revert-layer;
opacity: unset;

Werte

<alpha-value>

Eine <number> im Bereich von 0.0 bis 1.0, inklusive, oder ein <percentage> im Bereich von 0% bis 100%, inklusive, die die Opazität des Kanals darstellt (also der Wert des Alphakanals). Jeder Wert außerhalb dieses Intervalls, obwohl gültig, wird auf den nächstgelegenen Grenzwert im Bereich begrenzt.

Wert	Bedeutung
0	Das Element ist vollständig transparent (d.h. unsichtbar).
Jede <number> streng zwischen 0 und 1	Das Element ist durchsichtig (d.h. der Inhalt hinter dem Element ist sichtbar).
1 (Standardwert)	Das Element ist vollständig opak (visuell fest).

Beschreibung

opacity wird auf das Element als Ganzes angewendet, einschließlich seines Inhalts, auch wenn der Wert nicht von Kind-Elementen geerbt wird. Daher haben das Element und seine Kinder alle dieselbe Opazität im Verhältnis zum Hintergrund des Elements, auch wenn sie unterschiedliche Opazitäten zueinander haben.

Um die Opazität nur des Hintergrunds zu ändern, verwenden Sie die background Eigenschaft mit einem Farbwert, der einen Alphakanal ermöglicht. 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 jedoch immer noch Teil des DOM. Das bedeutet, dass sie immer noch Zeigerereignisse registrieren und, wenn die Elemente in einer Tab-Reihenfolge sind, erhalten sie auch Fokus. Für eine gute Benutzerfreundlichkeit stellen Sie sicher, solche Elemente sichtbar zu machen, wenn sie Benutzerinteraktionen erhalten, oder verwenden Sie die CSS pointer-events Eigenschaft, um Zeigerereignisse zu deaktivieren und das Element aus der Tab-Reihenfolge herauszunehmen, 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 versetzt das Element in einen neuen stapelnden Kontext.

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

Übergang der Opazität

Beim Übergang der Opazität von Elementen, wenn Sie sie zur Seite hinzufügen, nachdem der Inhalt zuvor mit visibility: hidden, display: none oder content-visibility: hidden verborgen wurde, müssen Sie sowohl ein @starting-style als auch transition-behavior: allow-discrete beinhalten:

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

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

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

Um erste Stilübergänge zu ermöglichen, sind @starting-style Regeln erforderlich. Im obigen Code wird opacity: 0 im @starting-style gesetzt, um einen Ausgangspunkt für den Übergang zu schaffen, wenn das Element sein initiales 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. Sehen Sie sich die transition-behavior Eigenschaft für weitere Details an.

Barrierefreiheit

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 Farbkontrastverhältnis wird durch Vergleich der Leuchtdichte der opazitätangepassten Text- und Hintergrundfarbwerte bestimmt. Um die aktuellen Web Content Accessibility Guidelines (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 definiert als 18.66px und fett oder größer, oder 24px oder größer.

• WebAIM: Farbkontrast-Checker
• MDN Verständnis der WCAG, Leitfaden 1.4 Erklärungen
• Verständnis Erfolgskriterium 1.4.3 | W3C Verständnis der WCAG 2.0

Verschiedene Betriebssysteme bieten eine Präferenz für die Reduzierung der Transparenz. Um die opacity basierend auf den Transparenzeinstellungen des Betriebssystems des Benutzers zu setzen, verwenden Sie die prefers-reduced-transparency Media-Query.

Formale Definition

Formale Syntax

opacity = 
  <opacity-value>  

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

Beispiele

Opazität setzen

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

Opazität beim Hover setzen

Im folgenden Beispiel wird die Opazität beim Hover geändert, sodass das gestreifte Hintergrundbild auf dem Elternelement durch das Bild hindurchscheint.

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

Stil basierend auf Benutzerpräferenzen

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

.element {
  opacity: 0.5;
}

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• prefers-reduced-transparency Media-Query
• CSS Farbe Modul
• SVG opacity Attribut