Css 重叠2个div以显示颜色混合

有可能看到这两个div的重叠部分显示为这样吗

<div style="position:relative;margin-top:100px;width:500px;height:300px;">
    <div style="background-color:rgba(23, 170, 180, 1);width:60px;height:145px;position:absolute;"></div>
    <div style="background-color:rgba(249, 177, 67, 1);width:110px;height:70px;position:absolute;"></div>        
</div>

---

即使它只使用最新的CSS3或甚至-webkit-properties工作。

您几乎已经做到了，您只需要为叠加div设置不透明度。您已经在使用rgba颜色值，只需将最后一个单元1设置为低于1的值：

#parent {
    position:relative;
    margin-top:100px;
    width:500px;
    height:300px;
}

#one {
    background-color:rgba(23, 170, 180, 1);
    width:60px;
    height:145px;
    position:absolute;
}

#two {
    background-color:rgba(249, 177, 67, 0.5);
    width:110px;
    height:70px;
    position:absolute;
}

---

在阅读了您的评论并看到您不希望div的非重叠部分受到alpha值或不透明度的影响后，您将不得不研究/javascript插件，比如Nathan Lee链接的插件。

尝试一下这个，我希望这对您有所帮助

<div style="position:relative;margin-top:100px;width:500px;height:300px;">
    <div style="background-color:rgba(23, 170, 180, 1);width:60px;height:145px;position:absolute; z-index: 1;
opacity: 0.5; left: 25px;"></div>
    <div style="background-color:rgba(249, 177, 67, 1);width:110px;height:70px;position:absolute;"></div>        
</div>

---

看到这个了吗

如果我改变两个div的alpha值，非重叠部分也会得到我不想要的不透明度。这些div中除了颜色之外还有其他颜色吗？没有。这些只是颜色框。你能不能不加上第三个div，然后用这样的方法来设置颜色：根据你的要求设置不透明度，但我不希望非重叠部分的不透明度改变。