Question

假设我们有两个具有以下条件的渐变：

除了alpha参数外，渐变是相同的。
一个渐变直接位于另一个渐变之上，并且它们已完美注册。
背景渐变完全不透明。
前景渐变的透明度不同。

假设当浏览器混合两个这样的渐变时，前景渐变对复合输出没有明显的影响是否合理？

为了测试我的断言，我使用HTML和CSS设计了以下test (available as a Fiddle)：

<body>
<style>
div.bg {
    width: 254px;
    height: 254px;
    background-image: linear-gradient(
        to right, 
        rgba(255, 255, 255, 1.0)   0%, 
        rgba(255,   0,   0, 1.0) 100%
    );
    border: 1px solid #808080;
}
div.fg {
    height: 127px;
    background-image: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0.0)   0%, /* If these alpha values are identical   */
        rgba(255,   0,   0, 1.0) 100%  /* (regardless of value), the phenomenon */
    );                                 /* disappears!                           */
}
</style>
<div class=bg>
    <div class=fg></div>
</div>
</body>

在Firefox（F）中，我的断言得到了证实。在Chrome（C）中，它不是。这些屏幕截图显示了结果：

（F） Firefox result （C） Chrome result

请注意Chrome输出中存在接缝。对于Chrome，仅当前景渐变的开始和结束alpha值不等时才会发生这种情况。当它们相等时，Chrome会生成与Firefox相同的输出 - 无论使用的实际alpha值如何！

你能确定这里发生了什么吗？哪个浏览器是对的？是否存在支持这些行为的规范，或者完全取决于浏览器供应商的alpha混合算法？

为什么Chrome与Alpha渐变混合时会使颜色变暗？

0 个答案: