LESS - Fonction de fusion des couleurs Hardlight

La description

La fonction de lumière dure fonctionne de manière similaire à la superposition mais le rôle des couleurs est inversé. Il exécute une fonction overlay () avec le deuxième paramètre pour déterminer si une opération de multiplication ou d'écran doit être effectuée.

Paramètres

  • color1- Un objet couleur à superposer .

  • color2 - Un objet de couleur de base qui est la couleur déterminante rendant la couleur résultante plus claire ou plus foncée.

Retour

Couleur

Exemple

L'exemple suivant illustre l'utilisation de la fonction hardlight dans le fichier LESS -

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

   <body>
      <h2>Hardlight Function</h2>
      <div class = "color1">
         <p>(color1) <br> #ff6600</p>
      </div><br>
      
      <div class = "color2">
         <p>(color2) <br> #0000ff</p>
      </div><br>
      
      <div class = "res">
         <p>(result) <br> #0000ff</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: #0000ff;
}

.res {
   width: 100px;
   height: 100px;
   background-color: hardlight(#ff6600, #0000ff);
}

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

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: #0000ff;
}

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

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_hardlight.html fichier.

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