MENOS - Función de diferencia de combinación de colores

Descripción

La función de diferencia resta el segundo color de entrada del primer color de entrada canal por canal (tenga en cuenta que los valores negativos están invertidos). Restar el color negro no dará como resultado ningún cambio; cuando se resta el color blanco , se produce una inversión de color.

Parámetros

color1- Un objeto de color que actúa como minuendo.
color2- Un objeto de color que actúa como sustraendo .

Devoluciones

color

Ejemplo

El siguiente ejemplo demuestra el uso de la función de diferencia en el archivo 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>

A continuación, cree el archivo style.less .

estilo sin

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

Puede compilar style.less en style.css usando el siguiente comando:

lessc style.less style.css

Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:

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

Salida

Siga estos pasos para ver cómo funciona el código anterior:

Guardar el código anterior en color_blending_difference.html archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.

↰ Previous page