LESS - Fonction de différence de mélange de couleurs

La description

La fonction de différence soustrait la deuxième couleur d'entrée de la première couleur d'entrée canal par canal (notez que les valeurs négatives sont inversées). La soustraction de la couleur noire n'entraînera aucun changement; lorsque la couleur blanche est soustraite, il en résulte une inversion de couleur.

Paramètres

  • color1- Un objet de couleur qui agit comme un minuend.

  • color2- Un objet de couleur qui agit comme sous- traitant .

Retour

Couleur

Exemple

L'exemple suivant illustre l'utilisation de la fonction de différence dans le fichier LESS -

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Difference Function</h2>
      <div class = "color1">
         <p>(color1) <br> #ff6600</p>
      </div><br>
      
      <div class = "color2">
         <p>(color2) <br> #333333</p>
      </div><br>
      
      <div class = "res">
         <p>(result) <br> #cc3333</p>
      </div>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

.color1 {
   width: 100px;
   height: 100px;
   background-color: #ff6600;
}

.color2 {
   width: 100px;
   height: 100px;
   background-color: #333333;
}

.res {
   width: 100px;
   height: 100px;
   background-color: difference(#ff6600, #333333);
}

p {
   padding: 30px 0px 0px 25px;
}

Vous pouvez compiler le style.less en style.css en utilisant la commande suivante -

lessc style.less style.css

Exécutez la commande ci-dessus; il créera automatiquement le fichier style.css avec le code suivant -

style.css

.color1 {
   width: 100px;
   height: 100px;
   background-color: #ff6600;
}

.color2 {
   width: 100px;
   height: 100px;
   background-color: #333333;
}

.result {
   width: 100px;
   height: 100px;
   background-color: #cc3333;
}

p {
   padding: 30px 0px 0px 25px;
}

Production

Suivez ces étapes pour voir comment fonctionne le code ci-dessus -

  • Enregistrer le code ci-dessus dans color_blending_difference.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, la sortie suivante s'affichera.