CSS opacity-Eigenschaft
Die CSS opacity-Eigenschaft legt den Transparenzgrad eines Elements fest. Probieren Sie das Beispiel selbst aus und sehen Sie die Ergebnisse.
Die CSS-Eigenschaft opacity legt fest, wie transparent ein Element ist. Sie wirkt auf das gesamte Element — Text, Hintergrund, Rahmen und alle untergeordneten Elemente werden gemeinsam ausgeblendet. Sie ist eine der CSS3-Eigenschaften.
Verwenden Sie opacity, wenn ein Element (und alles darin) verblasst erscheinen soll: zum Dimmen einer inaktiven Schaltfläche, zum Erstellen eines Hover-Effekts oder zum Überlagern eines Wasserzeichens über Inhalte.
Wie der opacity-Wert funktioniert
Der Wert ist eine Zahl zwischen 0 und 1:
0— das Element ist vollständig transparent (unsichtbar, nimmt aber weiterhin Platz ein und bleibt interaktiv).1— der Standardwert, das Element ist vollständig undurchsichtig.- Jeder Wert dazwischen, zum Beispiel
0.5, macht das Element teilweise transparent. Niedrigere Werte bedeuten mehr Transparenz.
In modernen Browsern kann der Wert auch als Prozentsatz angegeben werden, wobei 50% gleichwertig mit 0.5 ist.
Negative Werte sind ungültig und werden begrenzt — der Browser behandelt alles unter 0 als 0 und alles über 1 als 1.
Opacity wirkt sich auch auf untergeordnete Elemente aus. Wenn ein übergeordnetes Element ausgeblendet wird, wird jedes untergeordnete Element mit ausgeblendet, und Sie können ein untergeordnetes Element nicht wieder vollständig undurchsichtig machen, indem Sie ihm opacity: 1 zuweisen. Wenn Sie nur einen durchscheinenden Hintergrund haben möchten, während Text und untergeordnete Elemente vollständig sichtbar bleiben, verwenden Sie stattdessen eine RGBA-Farbe für background-color — zum Beispiel background-color: rgba(142, 191, 66, 0.3).
Ein Element mit einem opacity-Wert kleiner als 1 erzeugt einen neuen Stapelkontext. Dies kann ändern, wie es sich mit benachbarten Elementen überschneidet, sodass ein ausgeblendetes Element möglicherweise anders als erwartet über oder unter Geschwisterelementen erscheint.
| Anfangswert | 1.0 |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbt | Nein. |
| Animierbar | Ja. |
| Version | CSS3 |
| DOM-Syntax | object.style.opacity = "0.3"; |
Syntax
CSS opacity-Syntax
opacity: number | initial | inherit;Beispiel der opacity-Eigenschaft:
CSS opacity-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example1 {
background-color: #8ebf42;
opacity: 0.3;
}
.example2 {
background-color: #8ebf42;
opacity: 1;
}
</style>
</head>
<body>
<h2>Opacity property example</h2>
<h3>Opacity level is 0.3;</h3>
<div class="example1"> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
<h3>Opacity level is 1;</h3>
<div class="example2">Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</body>
</html>Ergebnis
Im folgenden Beispiel beträgt der Transparenzgrad des ersten Bildes 1.0, des zweiten Bildes 0.6 und des dritten Bildes 0.2.
Beispiel der opacity-Eigenschaft mit drei Transparenzgraden:
CSS opacity weiteres Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.a {
opacity: 1;
}
img.b {
opacity: 0.6;
}
img.c {
opacity: 0.2;
}
</style>
</head>
<body>
<h2>Opacity property example</h2>
<h3>Opacity: 1.0;</h3>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="a" />
<h3>Opacity: 0.6;</h3>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="b" />
<h3>Opacity: 0.2;</h3>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="c" />
</body>
</html>opacity vs. RGBA-Hintergründe
Ein häufiger Fehler ist der Griff zu opacity, wenn nur ein halbtransparenter Hintergrund gewünscht wird. Da opacity auch untergeordnete Elemente beeinflusst, wird der Text innerhalb einer Box ebenfalls blasser und schwerer lesbar. Eine RGBA-Hintergrundfarbe wendet Transparenz nur auf die Hintergrundfarbe an und lässt den Text vollständig undurchsichtig:
/* Fades the whole box, including the text */
.with-opacity {
background-color: #8ebf42;
opacity: 0.3;
}
/* Only the background is transparent; text stays crisp */
.with-rgba {
background-color: rgba(142, 191, 66, 0.3);
}Informationen zur Steuerung der Farbe der Box selbst finden Sie unter background-color.
Ausblenden beim Hover
Da opacity animierbar ist, lässt sie sich gut mit transition kombinieren, um sanfte Überblendungseffekte zu erzeugen, zum Beispiel das Dimmen eines Bildes, bis der Benutzer darüber fährt:
.thumb {
opacity: 0.6;
transition: opacity 0.3s ease;
}
.thumb:hover {
opacity: 1;
}opacity vs. visibility und display
opacity: 0, visibility: hidden und display: none blenden alle ein Element aus, verhalten sich aber unterschiedlich:
| Deklaration | Sichtbar | Nimmt Platz ein | Klickbar |
|---|---|---|---|
opacity: 0 | Nein | Ja | Ja |
visibility: hidden | Nein | Ja | Nein |
display: none | Nein | Nein | Nein |
Ein Element mit opacity: 0 ist unsichtbar, reagiert aber weiterhin auf Klicks. Fügen Sie daher pointer-events: none hinzu, wenn es auch nicht interaktiv sein soll.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| number | Definiert den Transparenzgrad. Der Standardwert ist 1.0. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |