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

Question

是否有可能看到这 2 个 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 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/