Comment obtenir un assombrissement subtil de l'arrière-plan avec CSS de manière plus efficace ?

Assombrissement subtil de l'arrière-plan : un dilemme CSS

Lors de la personnalisation des styles de boutons à l'aide de CSS, il est courant de vouloir modifier la couleur d'arrière-plan lors du survol pour l'accentuer. Spécifier manuellement une teinte plus foncée peut être fastidieux. Voici une solution plus efficace :

Exploiter l'image d'arrière-plan pour la superposition

Au lieu d'ajuster directement la propriété background-color, créez un calque subtil au-dessus du bouton en utilisant image d’arrière-plan. Cette technique maintient la visibilité du texte tout en modifiant subtilement l'arrière-plan.

Exemple de 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);
}

Dans cet exemple, un dégradé linéaire avec une opacité de 40 % est appliqué à l’élément survolé. Personnalisez la couleur du dégradé et l'opacité pour obtenir l'effet d'assombrissement souhaité.

Cette méthode offre une flexibilité, vous permettant d'assombrir n'importe quelle couleur d'arrière-plan sans spécifier de valeurs hexadécimales spécifiques. De plus, cela garantit que la couleur du texte reste inchangée, offrant ainsi une expérience utilisateur cohérente.

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!