opacity: 50%;Lerne HTML, CSS und JavaScript kostenlos mit der ReadyTools Academy.
Verfolge deinen Lernfortschritt, wachse in deinem Tempo und habe Spaß dabei! 🎯
In CSS können Sie die Transparenz (opacity) eines HTML-Elements mit der opacity-Eigenschaft steuern. Die opacity-Eigenschaft akzeptiert einen Wert zwischen 0 und 1, wobei 0 vollständig transparent (unsichtbar) und 1 vollständig undurchsichtig (vollständig sichtbar) darstellt.
Hier ist, wie Sie die opacity-Eigenschaft in CSS verwenden können:
.opacity-element {
opacity: 0.5;}
In diesem Beispiel:
Die Klasse .opacity-element setzt die Transparenz des Elements auf 50 %, wodurch es halbtransparent wird.
Sie können den Wert der opacity-Eigenschaft anpassen, um den Grad der Transparenz zu steuern, den Sie für das Element wünschen. Zum Beispiel würde opacity: 0.2; das Element sehr transparent machen, während opacity: 0.8; es nur leicht transparent machen würde.
Hier ist ein weiteres Beispiel mit voller Transparenz und einem Hover-Effekt, um die Transparenz bei Mausüberlagerung zu ändern:
.full-opacity-element {
opacity: 1;
transition: opacity 0.3s;
}
.full-opacity-element:hover {
opacity: 0.7;
}
In diesem Fall:
Die opacity-Eigenschaft wird häufig verwendet, um Hover-Effekte, Fade-Animationen oder die Sichtbarkeit von Elementen basierend auf Benutzerinteraktionen zu steuern. Es ist ein nützliches Werkzeug, um die Transparenz von Elementen zu steuern und Tiefe in das Design Ihrer Website zu bringen.
Sprache wählen
Thema wählen
© 2025 ReadyTools. Alle Rechte vorbehalten.