Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich die Hintergrundfarben von Elementen beim Schweben abdunkeln, ohne die Transparenz zu beeinträchtigen?

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

Linda Hamilton
Linda HamiltonOriginal
2024-11-10 22:18:02534Durchsuche

How to Darken Element Background Colors on Hover Without Affecting Transparency?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn