Abdunkeln der Hintergrundfarbe von Elementen mit CSS

Zur Verbesserung der Benutzeroberfläche gehört das Hervorheben interaktiver Elemente wie Schaltflächen durch Ändern ihres Erscheinungsbilds. Ein gängiger Ansatz besteht darin, die Hintergrundfarbe beim Bewegen des Mauszeigers abzudunkeln.

Zunächst könnte man versuchen, die Deckkraft anzupassen, aber das wirkt sich sowohl auf die Farbe als auch auf die Transparenz aus. Es gibt eine gezieltere Lösung.

Methode: Eine dunkle Ebene überlagern

Erstellen Sie eine dunkle Überlagerung mit einem Hintergrundbild. Diese Methode behält die ursprüngliche Textfarbe bei, während der Hintergrund abgedunkelt wird.

Implementieren Sie die Overlay-Ebene in CSS:

.Button {
  background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}

.Button:hover {
  background-color: /* Original background color */;
}

Diese Technik verdunkelt automatisch jede Hintergrundfarbe, sogar mehrere Farben, wie im Beispiel zu sehen ist:

 some text 
Durch die Nutzung dieser Overlay-Methode können Entwickler die Hintergrundfarben von Elementen beim Hovern einfach abdunkeln und so die Benutzerinteraktivität verbessern, ohne mühsam dunklere Farbtöne manuell berechnen zu müssen.