Less 颜色操作函数Mix的计算方法

Less Mix混合两种颜色以及不透明度

描述

它用于混合两种颜色以及不透明度。 它有以下参数：

• color1 ：它代表一个颜色对象。

• color2 ：它代表一个颜色对象。

• weight ：这是一个可选参数，通过在两种颜色之间提供百分比平衡点来指定元素的权重。默认的比例是 50%，这意味着两个颜色各占一半，如果指定的比例是 25%，这意味着第一个颜色所占比例为 25%，第二个颜色所占比例为75%。

Example:

mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)
mix(#ff0000, #0000ff, 50%)

Output:

rgba(75, 25, 0, 0.75)
#800080

那么这个函数是怎样计算得到混合之后的颜色呢？研究之后发现（以第一个为例）：

1、计算混合之后的透明度：（1.0 * 50%） + （0.5 * 50%）= 0.75

2、分别计算混合后rgb的值，公式：α * color_1 + （1-α） * color_2，即：

    r： 100 * 0.75 + （1 - 0.75） * 0 = 75

    g： 0 * 0.75 + （1 - 0.75） * 100 = 25

    b： 0 * 0.75 + （1 - 0.75） * 0 = 0

    即： mix（rgba（100, 0, 0, 1.0）, rgba（0, 100, 0, 0.5）, 50%） = rgba（75, 25, 0, 0.75）；