上一节:

  Less 色彩混合函数

  • 定义和使用

    在本章中，我们将了解LESS中的颜色混合函数。这些操作与Photoshop，Fireworks或GIMP等图像编辑器中使用的类似操作相同，这些操作将CSS颜色与图像进行匹配。
    下表显示了LESS中使用的颜色混合功能。
    序号 功能与说明 示例
    1
    multiply
    它将两种颜色相乘并返回结果颜色。
    background-color: multiply(#ff6600, #0000ff);
    它在CSS中编译，如下所示-
    background-color: #000000;
    2
    screen
    它采用两种颜色并返回较亮的颜色。它与乘法功能相反。
    background-color: screen(#ff6600, #0000ff);
    它在CSS中编译，如下所示-
    background-color: #ff66ff;
    3
    overlay
    它通过组合乘法和屏蔽效果产生结果。
    background-color: overlay(#ff6600, #0000ff);
    它在CSS中编译，如下所示-
    background-color: #ff0000;
    4
    softlight
    它的工作方式类似于叠加，但仅使用部分颜色，从而软突出显示另一种颜色。
    background-color: softlight(#ff6600, #0000ff);
    它在CSS中编译，如下所示-
    background-color: #ff2900;
    5
    hardlight
    它的工作方式类似于叠加，但颜色的作用相反。
    background-color: hardlight(#ff6600, #0000ff);
    它在CSS中编译，如下所示-
    background-color: #0000ff;
    6
    difference
    从第一输入颜色中减去第二输入颜色。
    background-color: difference(#ff6600, #333333);
    它在CSS中编译，如下所示-
    background-color: #cc3333;
    7
    exclusion
    它的作用类似于差功能，但对比度较低。
    background-color: exclusion(#ff6600, #333333);
    它在CSS中编译，如下所示-
    background-color: #cc7033;
    8
    average
    它以每通道（RGB）为基础计算两种输入颜色的平均值。
    background-color: average(#ff6600, #0000ff);
    它在CSS中编译，如下所示-
    background-color: #803380;
    9
    negation
    它与差分功能相反，差分功能从第二种颜色中减去第一种颜色。
    background-color: negation(#ff6600, #333333);
    它在CSS中编译，如下所示-
    background-color: #cc9933;
    想了解更多颜色的知识，请阅读我们的颜色教程
上一节: