Comment puis-je assombrir l'arrière-plan d'un élément en survol sans trouver de nouveaux codes hexadécimaux ?

Amélioration de la couleur d'arrière-plan d'un élément avec CSS : une approche plus simple

Lorsqu'ils cherchent à assombrir légèrement la couleur d'arrière-plan d'un élément au survol, les développeurs ont souvent recours à la recherche minutieuse de codes hexadécimaux plus sombres qui aligner avec la couleur d'origine. Cependant, une solution plus rapide émerge grâce à la capacité de CSS à utiliser une superposition translucide.

En incorporant une couche sombre semi-transparente au-dessus de l'arrière-plan existant, vous pouvez obtenir sans effort l'effet d'assombrissement souhaité. Cette méthode vous permet de conserver la couleur d'origine du texte tout en modifiant de manière transparente l'apparence de l'arrière-plan.

Exemple de code

Pour illustrer cette technique, considérez le code CSS suivant :

.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 extrait, l'état de survol du bouton présente un dégradé linéaire qui superpose la couleur d'arrière-plan avec un calque noir opaque à 40 %. Le résultat est un effet d'arrière-plan de bon goût et subtilement plus sombre qui s'adapte parfaitement aux différentes couleurs d'arrière-plan.

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

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!