Comment puis-je ajuster dynamiquement la luminosité des couleurs par pourcentage en CSS ?

Ajustement dynamique des couleurs avec pourcentage CSS

Ajuster la luminosité ou la luminosité des couleurs par pourcentage est une tâche courante dans la personnalisation et la personnalisation CSS. Dans les navigateurs modernes, cela peut être réalisé efficacement à l'aide de filtres CSS.

Réduction des couleurs CSS par pourcentage

Les extraits de code CSS fournis tentent de réduire la luminosité des couleurs en attribuant un pourcentage négatif à la propriété color ou à la couleur bleue. Cependant, CSS ne prend pas en charge de telles opérations. Au lieu de cela, les filtres CSS peuvent être utilisés pour modifier dynamiquement la luminosité des couleurs.

Ajustement de la luminosité des couleurs avec des filtres

La propriété de filtre CSS vous permet d'appliquer des transformations prédéfinies aux éléments, notamment manipulation des couleurs. Pour réduire la couleur d'un pourcentage, vous pouvez utiliser le filtre luminosité(). Le code suivant montre comment assombrir la couleur de l'élément « bouton » de 15 % :

.button {
  color: #ff0000;
}

.button:hover {
  filter: brightness(85%);
}

Dans cet exemple, le filtre luminosité() est appliqué à l'élément bouton au survol. La valeur de 85 % réduit la luminosité de la couleur, la rendant plus sombre. Notez que 100 % représente la luminosité de base et que les valeurs inférieures à 100 % produisent des couleurs plus sombres, tandis que les valeurs supérieures à 100 % produisent des couleurs plus claires.

En utilisant cette méthode, vous pouvez ajuster dynamiquement la couleur des éléments en spécifiant un pourcentage. , vous offrant un meilleur contrôle sur la personnalisation des couleurs et la personnalisation de vos applications Web.

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!