Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann ich den Hintergrund eines Elements beim Schweben abdunkeln, ohne neue Hex-Codes zu finden?

Barbara Streisand
Freigeben: 2024-11-10 17:33:02
Original
684 Leute haben es durchsucht

How Can I Darken an Element's Background on Hover Without Finding New Hex Codes?

Verbessern der Hintergrundfarbe von Elementen mit CSS: Ein einfacherer Ansatz

Wenn Entwickler versuchen, die Hintergrundfarbe eines Elements beim Hover leicht abzudunkeln, greifen Entwickler oft auf die mühsame Suche nach dunkleren Hex-Codes zurück an die Originalfarbe anpassen. Eine schnellere Lösung ergibt sich jedoch aus der Fähigkeit von CSS, eine durchscheinende Überlagerung zu verwenden.

Durch die Einbindung einer halbtransparenten dunklen Ebene über den vorhandenen Hintergrund können Sie mühelos den gewünschten Verdunkelungseffekt erzielen. Mit dieser Methode können Sie die Originalfarbe des Textes beibehalten und gleichzeitig das Erscheinungsbild des Hintergrunds nahtlos übergehen.

Codebeispiel

Um diese Technik zu veranschaulichen, betrachten Sie den folgenden CSS-Code:

.button {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  font-size: 20px;
  background-color: red;
}

.button:hover {
  background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}
Nach dem Login kopieren

In diesem Snippet weist der Hover-Status der Schaltfläche einen linearen Farbverlauf auf, der die Hintergrundfarbe mit einer 40 % undurchsichtigen schwarzen Ebene überlagert. Das Ergebnis ist ein geschmackvoller und dezent dunklerer Hintergrundeffekt, der sich nahtlos an verschiedene Hintergrundfarben anpasst.

<div class="button"> some text </div>
<div class="button">
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich den Hintergrund eines Elements beim Schweben abdunkeln, ohne neue Hex-Codes zu finden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage