代码之家  ›  专栏  ›  技术社区  ›  MaximPro

如何混合两个透明层?

  •  0
  • MaximPro  · 技术社区  · 7 年前

    例如,我们有两个透明层:第一个是 black (0, 0, 0, 0.75) 其次是 white (255, 255, 255, 0.64) . 我不知道怎么混合。

    但我知道如何混合一个不透明层和一个透明层。看起来是这样的: https://wikimedia.org/api/rest_v1/media/math/render/svg/1e35c32f13d5eedc7ac21e9e566796dd048a31e6

    1 回复  |  直到 7 年前
        1
  •  1
  •   meowgoesthedog    7 年前

    假设背景色是 (C, 1) (rgb,a),第一层是 (A, s) 第二层 (B, t) . 将混合方程应用两次:

    C' = t * B + (1-t) * [s * A + (1-s) * C]
    
         = [t * B + (1-t) * s * A] + (1-t) * (1-s) * C
    

    我们可以看到新的 有效的 混合系数为 1 - (1-s) * (1-t) . 要获得组合的透明度颜色,请将第一个术语除以以下值:

    r := 1 - (1-s) * (1-t)
    
    D := [t * B + (1-t) * s * A] / r
    
    --> C' = r * D + (1-r) * C
    

    即,新的有效透明度层由 (D, r) .

    在您的示例中,值为 D = (179, 179, 179) r = 0.91 .