Comment puis-je ajuster dynamiquement la luminosité d'une couleur à l'aide de CSS ?

Manipulation dynamique des couleurs avec des filtres CSS

Question :

Comment pouvons-nous éclaircir ou assombrir une couleur spécifiée en utilisant CSS ? Peut-on réduire une couleur d'un pourcentage ?

Réponse :

Oui, réduire une couleur d'un pourcentage est possible grâce aux filtres CSS. Voici comment :

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}

Dans cet exemple, la couleur de base est définie sur rouge (#ff0000) pour le bouton. En appliquant un filtre sur le bouton au survol, la luminosité est réduite de 15 %, ce qui donne une teinte de rouge plus foncée. Les pourcentages peuvent être ajustés pour obtenir les niveaux de luminosité ou d'obscurité souhaités.

Cette approche est compatible avec tous les navigateurs modernes, comme en témoigne sa large disponibilité dans le tableau de compatibilité caniuse.

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!