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预编译器来解决它，但只有在您需要获取此颜色一次而不是动态时才能使用它。

在这种情况下，这很简单：

@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%);  
}

具有RGBA背景的子元素和父元素。我如何确定等同的＆＃34; RGBA？

1 个答案: