重叠2个DIV以显示颜色混合

Question

是否可以看到这两个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-属性。

Answer 1

你几乎得到它，你只需要为覆盖的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;
}

http://jsfiddle.net/VAWPK/

---

在阅读你的评论并发现你不希望div的非重叠部分受到alpha值或不透明度的影响之后，你将不得不研究像{nat}这样的<canvas>/javascript插件李连接到。

Answer 2

试试这个我希望这会对你有所帮助

<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>

请参阅此http://jsfiddle.net/xu8n5/1/