Javascript 在CSS中可以自定义混合颜色吗？

我有两个

div

，有两个不同的透明彩色背景。这些元素相互重叠

我想定制重叠区域的颜色

例如，我混合红色和蓝色，不透明度为0.5，并希望重叠区域为黑色。可能吗？此解决方案将简化功能的实现

为了更好地理解，例如：

.wrapper{
宽度：200px；
高度：500px；
背景色：#fff；
位置：相对位置；
}
.盒子{
宽度：100%；
位置：绝对位置；
}
.框-1{
顶部：0px；
高度：250px；
背景色：rgba（181226163,0.5）；
}
.方框-2{
背景色：rgba（183222241,0.5）；
顶部：200px；
高度：300px；
}

---

我认为您需要设置两个框的不透明度，以混合它们的颜色，而不是在颜色上设置不透明度。rgba不透明度仅使应用于div的颜色变亮或变暗。默认情况下，div的不透明度设置为1，因此如果两个框重叠，则仅显示顶部框，隐藏底部框。要实现您想要的效果，请将

不透明度：0.5

添加到

.box-1

和

.box-2

类中，以同样应用于div

当然不过，您只能通过包含另一个元素来实现这一点 它位于重叠区域的顶部。为了显示这一点，我正在更改 div的宽度和高度，以便您可以看到 边界是有限的

见此：

div{位置：绝对；边框：1px纯黑色；}
#div1{背景：红色；不透明度：.5；顶部：0；高度：110px；宽度：100px；}
#div2{背景：蓝色；不透明度：.5；顶部：50px；高度：100px；宽度：175px；}
#div3{背景：黑色；顶部：50px；高度：50px；z索引：99；宽度：150px；}

测试
测试
测试类似的东西

但如果高度是动态的，肯定不会有多大帮助
.wrapper{
宽度：200px；
高度：500px；
背景色：#fff；
位置：相对位置；
}
.盒子{
宽度：100%；
位置：绝对位置；
}
.框-1{
顶部：0px；
高度：250px；
背景色：rgba（181226163,0.5）；
}
.方框-2{
背景色：rgba（183222241,0.5）；
顶部：200px；
高度：300px；
}
.方框2：之前{
背景色：黑色；
高度：50px；
显示：块；
内容：''；
}

JS-Bin
您可以使用CSS渐变：

.box-2{
背景颜色：蓝色；
顶部：200px；
高度：300px；
背景：rgb（0,0,0）；
背景：-moz线性梯度（顶部，rgba（0,0,0,1）0%，rgba（0,0,0,1）12%，rgba（0,0,0,1）25%，rgba（0,0,0,1）39%，rgba（44,44,44,1）50%，rgba（0,0,0,0,1）51%，rgba（25,33255,1）65%，rgba（25,33255,1）78%，rgba（25,33255,1）78%，rgba（25,33255,1）100%）；
背景：webkit线性梯度（顶部，rgba（0,0,0,1）0%，rgba（0,0,0,1）12%，rgba（0,0,0,1）25%，rgba（0,0,0,1）39%，rgba（44,44,44,1）50%，rgba（0,0,0,0,1）51%，rgba（25,33255,1）65%，rgba（25,33255,1）78%，rgba（25,33255,1）78%，rgba（25,33255,1）100%）；
背景：线性梯度（至底部，rgba（0,0,0,1）0%，rgba（0,0,0,1）12%，rgba（0,0,0,1）25%，rgba（0,0,0,1）39%，rgba（44,44,44,1）50%，rgba（0,0,0,0,1）51%，rgba（25,33255,1）65%，rgba（25,33255,1）78%，rgba（25,33255,1）78%，rgba（25,33255,1）100%；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#000000'，endColorstr='#1921ff'，GradientType=0）；
不透明度：0.5；
背景：rgb（0,0,0）；
背景：moz线性梯度（顶部，rgba（0,0,0,1）0%，rgba（0,0,0,1）12%，rgba（0,25255,1）25%，rgba（0,25255,1）39%，rgba（0,25255,1）49%，rgba（0,25255,1）50%，rgba（0,25255,1）53%，rgba（25,33255,1）54%，rgba（0,25255,1）60%，rgba（25,33255,1）65%，rgba（25,33255,255,1）78%，rgba（33255,1%）；
背景：-webkit线性梯度（顶部，rgba（0,0,0,1）0%，rgba（0,0,0,1）12%，rgba（0,25255,1）25%，rgba（0,25255,1）39%，rgba（0,25255,1）49%，rgba（0,25255,1）50%，rgba（0,25255,1）53%，rgba（25,33255,1）54%，rgba（0,25255,1）60%，rgba（25,33255,1）65%，rgba（25,33255,255,1）78%，rgba（33255,1%）；
背景：线性梯度（到底部，rgba（0,0,0,1）0%，rgba（0,0,0,1）12%，rgba（0,25255,1）25%，rgba（0,25255,1）39%，rgba（0,25255,1）49%，rgba（0,25255,1）50%，rgba（0,25255,1）53%，rgba（25,33255,1）54%，rgba（0,25255,1）60%，rgba（25,33255,1）65%，rgba（25,33255,1）78%，rgba（33255,1），33255,1%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#000000'，endColorstr='#1921ff'，GradientType=0）；
不透明度：.8；
}
这将使用CSS属性的值multiply来实现结果。不幸的是，IE中不支持这一点



div{
宽度：100px；
高度：100px；
不透明度：1；
}
瑞德先生{
背景图片：url（数据：image/png；base64，ivborw0kggoaaansuheugaaaaaaabcayaaffcsjaaaaduleqvr42mp8z8dwhwafbqiax8jx0gaaabjru5erkjgg==）；
}
蓝先生{
背景图片：url（数据：image/png；base64，ivborw0kggoaaansuheugaaaaaaabcayaaaaffcsjaaadulleqvr42mnkypj/hwadbwiamcbhyqaaabjru5erkjgg==）；
混合模式：倍增
}
这可能比你想做的要多得多，但我认为这是获得你想要的结果的唯一途径

使用javascript，您基本上可以检测是否存在重叠，以及是否存在表示重叠区域的div和div为黑色的颜色。下面是一个代码片段，显示了一个非常简单的示例

更新：

我在一篇评论中看到，这需要跨多个元素工作，而不仅仅是两个元素，所以我更新了我的代码片段以处理多个元素。只要元素是类类型
可重叠框
height: calc(100% - 200px); /* 200px is the top: value of .box-2 */