Comment assombrir facilement les arrière-plans d'éléments avec CSS ?

Rendre les éléments plus sombres avec CSS : une astuce pratique

Les méthodes actuelles pour assombrir les arrière-plans des éléments à l'aide de CSS peuvent être fastidieuses, nécessitant la création manuelle de un code hexadécimal de couleur plus foncée. Cet article présente une alternative pratique qui exploite l'image d'arrière-plan pour obtenir avec élégance l'effet d'assombrissement souhaité.

Le problème : l'assombrissement manuel fastidieux

Lorsque vous survolez un bouton, il Il est courant d'assombrir la couleur d'arrière-plan pour améliorer l'interactivité de l'utilisateur. Auparavant, cela était réalisé en spécifiant un code hexadécimal plus sombre dans le CSS, comme indiqué ci-dessous :

.Button:hover {
  background-color: #ALittleDarkerHex;
}

Cependant, trouver un code hexadécimal plus sombre approprié peut prendre du temps et être imprécis.

La solution : superposition d'image d'arrière-plan

Au lieu de modifier la propriété background-color, cette technique introduit un couche sombre au-dessus de l'élément à l'aide de l'image d'arrière-plan et du dégradé linéaire :

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

Cette superposition sombre est appliquée sur la couleur d'arrière-plan existante, créant un effet d'assombrissement subtil sans altérer la couleur du texte. L'opacité de 40 % permet à la couleur d'arrière-plan sous-jacente de rester visible tout en réduisant son intensité.

Mise en œuvre et exemple

Pour démontrer cette technique, considérez le HTML et le CSS suivants :

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

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

Les boutons afficheront leurs couleurs d'arrière-plan d'origine et, une fois survolés, un subtil effet d'assombrissement sera appliqué, quelle que soit la couleur de fond.

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!