Wie kann ich die Hintergrundfarben von Elementen beim Schweben abdunkeln, ohne die Transparenz zu beeinträchtigen?

Abdunkeln der Hintergrundfarbe von Elementen mit CSS

Zur Verbesserung der Benutzeroberfläche gehört das Hervorheben interaktiver Elemente, wie z. B. 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 :

<div class="button"> some text </div>
<div class="button">

Durch die Nutzung dieser Overlay-Methode können Entwickler die Hintergrundfarben von Elementen beim Hover ganz einfach abdunkeln und so die Benutzerinteraktivität verbessern, ohne dass dies erforderlich ist Aufwand bei der manuellen Berechnung dunklerer Farbtöne.

Das obige ist der detaillierte Inhalt vonWie kann ich die Hintergrundfarben von Elementen beim Schweben abdunkeln, ohne die Transparenz zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!