opacity
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die opacity
CSS-Eigenschaft legt die Opazität eines Elements fest. Die Opazität ist das Maß dafür, wie stark Inhalte hinter einem Element verborgen sind, und ist das Gegenteil von Transparenz.
Probieren Sie es aus
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 von0.0
bis1.0
, einschließlich, oder ein<percentage>
im Bereich von0%
bis100%
, einschließlich, die die Opazität des Kanals darstellt (d. h. den Wert seines Alpha-Kanals). Alle Werte außerhalb des Intervalls werden, obwohl gültig, auf das nächstgelegene Limit im Bereich begrenzt.Wert Bedeutung 0
Das Element ist vollständig transparent (d. h. unsichtbar). Eine <number>
, die zwischen0
und1
liegtDas Element ist durchscheinend (d. h. Inhalte hinter dem Element sind sichtbar). 1
(Standardwert)Das Element ist vollständig opak (visuell solide).
Beschreibung
opacity
gilt für das gesamte Element, einschließlich seiner Inhalte, auch wenn der Wert nicht von Kindelementen vererbt wird. Daher haben das Element und seine Kinder alle die gleiche Opazität relativ zum Hintergrund des Elements, selbst 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 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, aber sie sind immer noch Teil des DOM. Das bedeutet, dass sie weiterhin Zeigerereignisse registrieren und, wenn die Elemente in einer Tabulatorreihenfolge sind, den Fokus erhalten. Für eine gute Benutzerfreundlichkeit sollten solche Elemente sichtbar gemacht werden, wenn sie Benutzerinteraktionen erhalten, oder verwenden Sie die CSS-Eigenschaft pointer-events
, um Zeigerereignisse zu deaktivieren und das Element aus der Tabulatorreihenfolge zu entfernen, indem Sie sie 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 Stapelkontext.
Alleinige Verwendung von Opazität sollte nicht zur Bereitstellung von Informationen für Screenreader eingesetzt werden. Verwenden Sie das HTML-Attribut hidden
, die CSS-Eigenschaften visibility
oder display
Stil-Eigenschaften. Vermeiden Sie es, das aria-hidden
Attribut zu verwenden, aber wenn das Element mit Opazität versteckt wird, dann verstecken Sie es auch vor Screenreadern.
Übergang der Opazität
Beim Übergang der Opazität von Elementen, die der Seite hinzugefügt werden, wenn Inhalte zuvor mit visibility: hidden
, display: none
, oder content-visibility: hidden
versteckt waren, müssen sowohl ein @starting-style
als auch transition-behaviour: allow-discrete
einbezogen werden:
.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 ermöglichen, werden @starting-style
-Regeln benötigt. Im obigen Code stellt opacity: 0
im @starting-style
einen Startpunkt für den Übergang bereit, 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.
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 Menschen mit Sehbehinderungen den Inhalt der Seite lesen können.
Das Farbkontrastverhältnis wird durch den Vergleich der Helligkeit der opazitätsangepassten Text- und Hintergrundfarbenwerte 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 als 18.66px und fett oder größer, oder 24px oder größer definiert.
- WebAIM: Color Contrast Checker
- MDN Verständnis der WCAG, Erklärung von Leitlinie 1.4
- Verständnis des Erfolgskriteriums 1.4.3 | W3C Verständnis WCAG 2.0
Verschiedene Betriebssysteme bieten eine Präferenz zur Reduzierung der Transparenz. Um die opacity
basierend auf den Transparenzpräferenzen des Betriebssystems des Benutzers einzustellen, verwenden Sie die prefers-reduced-transparency
Media Query.
Formale Definition
Initialer Wert | 1 |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Prozentwerte | map to the range [0,1] |
Berechneter Wert | Derselbe wie der angegebene Wert nachdem die number auf den Bereich [0.0, 1.0] zugeschnitten wurde. |
Animationstyp | by computed value type |
Formale Syntax
opacity =
<opacity-value>
<opacity-value> =
<number> |
<percentage>
Beispiele
Opazität einstellen
Das folgende Beispiel zeigt, wie die opacity
-Eigenschaft die Opazität des gesamten Elements und des 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
Opazität beim Hover einstellen
Im folgenden Beispiel wird die Opazität beim Hover geändert, so dass das gestreifte Hintergrundbild des übergeordneten Elements 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
Stil basierend auf Benutzerpräferenzen
Um Elemente basierend auf den Transparenzpräferenzen des Betriebssystems des Benutzers zu stylen, verwenden Sie die prefers-reduced-transparency
Media Query. Das folgende Beispiel zeigt, wie die Media Query prefers-color-scheme
verwendet wird, um die gewünschte opacity
basierend auf den Benutzerpräferenzen festzulegen.
.element {
opacity: 0.5;
}
@media (prefers-reduced-transparency) {
.element {
opacity: 1;
}
}
Spezifikationen
Specification |
---|
CSS Color Module Level 4 # transparency |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
prefers-reduced-transparency
Media Query- CSS color Modul