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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_39072332/article/details/85338759

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

猜你喜欢

转载自blog.csdn.net/weixin_39072332/article/details/85338759
今日推荐