css - 子元素和父元素，均具有 RGBA 背景。如何确定 "equivalent"rgba？

Question

假设我有:

<div class="dark">
    <div class="lite"></div>
</div>

<div class="medium"></div>

和一些CSS:

.dark {background:rgba(10,10,10,0.8);}
.lite {background:rgba(200,200,200,0.5);}

如果我希望 medium 具有与合并后的 dark > lite 相同的 rgba 值，需要进行哪些计算？我认为一个简单的归一化计算(归一化每个颜色分量并相乘)会起作用，但事实似乎并非如此。

Answer 1

这样的计算无法使用 CSS 完成，但您的目标可以使用 background-blend-mode: multiply 实现。然而，这还没有得到广泛支持:http://caniuse.com/#feat=css-backgroundblendmode .

您可能需要一个 JavaScript 解决方案，查看这些 jQuery 插件: https://github.com/farski/jquery-blend/ https://github.com/jquery/jquery-color/

此外，根据您问题的性质，使用 CSS 预编译器或许可以解决它，但这仅在您需要一次性获取此颜色时有效，而不是动态获取。

在 LESS 中，这会像这样简单:

@dark: rgba(10,10,10,0.8);
@lite: rgba(200,200,200,0.5);

.dark {background: @dark;}
.lite {background: @lite;}
.medium {  
    background-color: mix(@dark, @lite, 50%);  
}