• • 此问题在此处已有答案**：

CSS overlapping elements & opacity issue（3个答案）
Color of stacked semi-transparent boxes depends on order?（4个答案）
5天前关闭。
此帖子已在2天前编辑并提交审核，无法重新打开帖子：
原始关闭原因未解决
我试着写一个HTML，使用户能够创建一个元素的Angular 和颜色（rgba）。我希望交叉部分是不透明的，每个元素都有透明度
但是，我不能用简单的方法来做到这一点，因为交叉区域仍然不是不透明的（0. 5 * 0. 5 = 0. 75）
这里有一个例子。

<p style="position:absolute;top:5%;height:50%;width:50%;background:rgba(255,0,0,0.5);color:white;">
  test1
</p>
<p style="position:absolute;top:30%;height:50%;width:50%;background:rgba(0,255,0,0.5);color:white;">
  test2
</p>
<p style="position:absolute;top:40%;width:100%;height:10%;background:rgba(0,0,255,1);color:white;z-index:-1">
  I want the cross part can not be seen
</p>

我想问一个解决方案，使十字架部分是100%不透明，而不使用其他元素或改变透明度。
我不想添加另一个元素的原因是，很难计算元素交叉的Angular 和空间，然后让元素完美地进入空间（如果有人能做到这一点，这仍然是一个解决方案）。