CSS opacity-Eigenschaft
Die opacity-Eigenschaft wird verwendet, um den Transparenzgrad eines Elements festzulegen.
Diese Eigenschaft ist eine der CSS3-Eigenschaften.
Mit dieser Eigenschaft kann ein Element vollständig transparent, halbtransparent oder im Standardzustand dargestellt werden.
Der Wertebereich liegt zwischen 0 und 1. Ein Wert von 0 macht das Element vollständig transparent. 1 ist der Standardwert, der das Element vollständig undurchsichtig macht. Werte zwischen 0 und 1 machen es stufenweise transparent.
INFO
Negative Werte sind ungültig.
TIP
Wenn Sie mit der opacity-Eigenschaft Transparenz auf den Hintergrund eines Elements anwenden, werden auch alle untergeordneten Elemente transparent. Verwenden Sie RGBA-Farben, wenn Sie die opacity-Eigenschaft nicht auf die untergeordneten Elemente anwenden möchten.
| 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 für die 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
Ein weiteres Beispiel, bei dem der Transparenzgrad des ersten Bildes 1,0 beträgt, der des zweiten Bildes 0,6 und der des dritten Bildes 0,2.
Beispiel für die opacity-Eigenschaft mit drei Transparenzstufen:
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="https://de.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="a" />
<h3>Opacity: 0.6;</h3>
<img src="https://de.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="b" />
<h3>Opacity: 0.2;</h3>
<img src="https://de.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="c" />
</body>
</html>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| number | Definiert den Transparenzgrad. Der Standardwert ist 1,0. | Ausführen » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Ausführen » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Practice
Was ist die 'opacity'-Eigenschaft in CSS und wie wird sie verwendet?