Wie kann mit CSS eine subtile Hintergrundverdunkelung effizienter erreicht werden?

Subtile Hintergrundverdunkelung: Ein CSS-Dilemma

Beim Anpassen von Schaltflächenstilen mithilfe von CSS möchte man häufig die Hintergrundfarbe ändern, wenn man mit der Maus darüber fährt, um sie hervorzuheben. Das manuelle Festlegen eines dunkleren Farbtons kann mühsam sein. Hier ist eine effizientere Lösung:

Hintergrundbild zum Layern nutzen

Anstatt die Eigenschaft „Hintergrundfarbe“ direkt anzupassen, erstellen Sie mithilfe von eine subtile Ebene über der Schaltfläche Hintergrundbild. Diese Technik behält die Sichtbarkeit des Textes bei und verändert gleichzeitig den Hintergrund auf subtile Weise.

Codebeispiel:

.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);
}

In diesem Beispiel wird ein linearer Farbverlauf mit einer Deckkraft von 40 % angewendet das schwebende Element. Passen Sie die Verlaufsfarbe und Deckkraft an, um den gewünschten Verdunkelungseffekt zu erzielen.

Diese Methode bietet Flexibilität und ermöglicht es Ihnen, jede Hintergrundfarbe abzudunkeln, ohne bestimmte Hexadezimalwerte anzugeben. Darüber hinaus stellt es sicher, dass die Textfarbe unverändert bleibt und sorgt so für ein einheitliches Benutzererlebnis.

Das obige ist der detaillierte Inhalt vonWie kann mit CSS eine subtile Hintergrundverdunkelung effizienter erreicht werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!