Comment assombrir les couleurs d'arrière-plan des éléments au survol sans affecter la transparence ?

Assombrir la couleur d'arrière-plan des éléments avec CSS

L'amélioration de l'interface utilisateur implique de mettre en évidence des éléments interactifs, tels que des boutons, en modifiant leur apparence. Une approche courante consiste à assombrir la couleur d'arrière-plan lors du survol.

Au départ, on peut tenter d'ajuster l'opacité, mais cela affecte à la fois la couleur et la transparence. Une solution plus ciblée existe.

Méthode : superposer un calque sombre

Créer une superposition sombre à l'aide d'une image d'arrière-plan. Cette méthode préserve la couleur originale du texte tout en assombrissant l'arrière-plan.

Implémentez le calque de superposition en CSS :

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

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

Cette technique assombrit automatiquement n'importe quelle couleur d'arrière-plan, même plusieurs couleurs comme le montre l'exemple. :

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

En tirant parti de cette méthode de superposition, les développeurs peuvent facilement assombrir les couleurs d'arrière-plan des éléments au survol, améliorant ainsi l'interactivité de l'utilisateur sans tracas. de calculer manuellement les nuances plus foncées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!