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 设置一个不透明度。您已经在使用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 值或不透明度的影响之后，您将不得不研究<canvas>/javascript像 Nathan Lee 链接到的插件。

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/