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
-Eigenschaft von CSS legt die Deckkraft eines Elements fest. Opazität ist das Maß, in dem der Inhalt hinter einem Element verborgen ist, 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 eine<percentage>
im Bereich von0%
bis100%
, einschließlich, die die Deckkraft des Kanals darstellt (das heißt, den Wert seines Alphakanals). Jeder Wert außerhalb des Intervalls, obwohl gültig, wird auf das nächstgelegene Limit im Bereich begrenzt.Wert Bedeutung 0
Das Element ist vollständig transparent (d.h. unsichtbar). Jede <number>
zwischen0
und1
Das Element ist durchscheinend (d.h. der Inhalt hinter dem Element ist sichtbar). 1
(Standardwert)Das Element ist vollständig undurchsichtig (visuell fest).
Beschreibung
opacity
gilt für das gesamte Element, einschließlich seines Inhalts, auch wenn 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 Deckkraft eines Hintergrunds zu ändern, verwenden Sie die background
-Eigenschaft mit einem Farbwert, der einen Alpha-Kanal ermöglicht. Zum 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 dennoch Teil des DOM. Das bedeutet, dass sie weiterhin Pointer-Ereignisse registrieren und, wenn die Elemente in einer Tab-Reihenfolge sind, auch den Fokus erlangen. Für eine gute Benutzerfreundlichkeit stellen Sie sicher, dass solche Elemente sichtbar werden, wenn sie Benutzerinteraktionen erhalten oder verwenden Sie die CSS pointer-events
-Eigenschaft, um Pointer-Ereignisse zu deaktivieren, und nehmen Sie das Element aus der Tab-Reihenfolge heraus, 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-Attribut hidden
, CSS visibility
oder CSS display
-Stileigenschaften. Es ist am besten, das aria-hidden
-Attribut zu vermeiden, aber wenn das Element mit Opazität verborgen ist, dann verstecken Sie es auch vor Screenreadern.
Übergang von Opazität
Wenn Sie die Opazität von Elementen ändern, indem Sie sie auf der Seite hinzufügen, wenn der Inhalt zuvor mit visibility: hidden
, display: none
oder content-visibility: hidden
verborgen war, müssen Sie sowohl ein @starting-style
als auch transition-behaviour: 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 erste Stil-Übergänge zu ermöglichen, werden @starting-style
-Regeln benötigt. Im obigen Code bietet die Einstellung von opacity: 0
in @starting-style
einen Ausgangspunkt für den Übergang, wenn das Element seine erste Stilaktualisierung erhält. Für weitere Details siehe @starting-style
.
Das Setzen von transition-behaviour: allow-discrete
ist erforderlich, um zu display: none
überzugehen. Weitere Details finden Sie in der transition-behavior
-Eigenschaft.
Barrierefreiheit
Wenn die Textopazität angepasst wird, ist es wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Textes und dem Hintergrund, auf dem der Text platziert wird, hoch genug ist, damit Menschen mit Sehbehinderungen den Inhalt der Seite lesen können.
Das Farbkontrastverhältnis wird bestimmt, indem die Leuchtdichte der opacity-angepassten 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 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, Erklärung der Richtlinie 1.4
- Verständnis des Erfolgskriteriums 1.4.3 | W3C Verständnis von WCAG 2.0
Verschiedene Betriebssysteme bieten eine Präferenz zur Reduzierung von Transparenz. Um die opacity
basierend auf den Transparenzeinstellungen des Betriebssystems des Benutzers zu setzen, verwenden Sie die prefers-reduced-transparency
Medienabfrage.
Formale Definition
Anfangswert | 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 festlegen
Das folgende Beispiel zeigt, wie die opacity
-Eigenschaft die Deckkraft des gesamten Elements und des 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 festlegen
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="//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
Stilisierung basierend auf Benutzervorlieben
Um Elemente basierend auf den Transparenz-Präferenzen des Betriebssystems des Benutzers zu gestalten, verwenden Sie die prefers-reduced-transparency
-Medienabfrage. Das folgende Beispiel zeigt, wie die prefers-color-scheme
-Medienabfrage verwendet wird, um die gewünschte opacity
basierend auf den Präferenzen des Benutzers festzulegen.
.element {
opacity: 0.5;
}
@media (prefers-reduced-transparency) {
.element {
opacity: 1;
}
}
Spezifikationen
Specification |
---|
CSS Color Module Level 4 # propdef-opacity |
Scalable Vector Graphics (SVG) 2 # ObjectAndGroupOpacityProperties |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
prefers-reduced-transparency
Medienabfrage- CSS-Farbe Modul
- SVG
opacity
Attribut