子元素和父元素，都具有 RGBA 背景。如何确定“等效”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%);  
}