CSS
HTML
COMPONENTS
CODE HUB
CSS Kontrast-Generator
Konfiguration
Contrast
Klasse
Vorschau
Code
ReadyTools Academy
Kommt baldLerne HTML, CSS und JavaScript kostenlos mit der ReadyTools Academy.
Verfolge deinen Lernfortschritt, wachse in deinem Tempo und habe Spaß dabei! 🎯
CSS Kontrast-Generator
Die CSS filter-Eigenschaft ermöglicht es Ihnen, eine Reihe von Bildbearbeitungseffekten auf ein HTML-Element anzuwenden, wie z. B. ein Bild oder ein Textfeld. Einer dieser Effekte ist der Kontrast, mit dem Sie den Kontrast eines Elements anpassen können.
Der Kontrastwert bestimmt, wie unterschiedlich die Farben des Bildes vom Original sind. Ein höherer Kontrastwert erhöht den Unterschied zwischen den Farben, während ein niedrigerer Wert diesen Unterschied verringert.
Hier ist ein Beispiel, wie Sie die contrast-Eigenschaft in CSS verwenden können:
img {
filter: contrast(100%);
}
img.high-contrast {
filter: contrast(150%);
}
img.low-contrast {
filter: contrast(70%);
}
In diesem Beispiel wird die filter-Eigenschaft auf ein Bild mit drei verschiedenen Kontrastwerten angewendet. Der Standardwert ist 100%, der den Kontrast nicht verändert. Die den Klassen high-contrast und low-contrast zugewiesenen Werte erhöhen bzw. verringern den Kontrast.
Es ist wichtig zu beachten, dass die Unterstützung der filter-Eigenschaft je nach Browser variieren kann und nicht alle Browser dieselben Filtereffekte bieten. Überprüfen Sie die Browserkompatibilität und testen Sie die gewünschten Effekte in mehreren Browsern, um sicherzustellen, dass sie ordnungsgemäß funktionieren.
Sprache wählen
Thema wählen
© 2025 ReadyTools. Alle Rechte vorbehalten.