Menu
I have two div with two different transparent, colored backgrounds. The elements overlap one another.
I would like to customize the color in the overlapped area.
For example I mix red and blue with opacity 0.5 and would like the overlapped area to be black. Is it possible? This solution would simplify the implementation of functionality.
For better understanding, example:
.wrapper{
width: 200px;
height: 500px;
background-color: #fff;
position: relative;
}
.box{
width: 100%;
position: absolute;
}
.box-1{
top: 0px;
height: 250px;
background-color: rgba(181, 226, 163, 0.5);
}
.box-2{
background-color: rgba(183, 222, 241, 0.5);
top: 200px;
height: 300px;
}<div class="wrapper">
<div class="box box-1">
</div>
<div class="box box-2">
</div>
</div>UPDATE:
The height of the overlap area is unknown, so it is not an option to add an element rigidly on height 50px. Question is about
custom mixing colors.
533
Mixing primary colors creates secondary colorsIf you combine two primary colors with each other, you get a so-called secondary color. If you mix red and blue, you get violet, yellow and red become orange, blue and yellow become green. If you mix all the primary colors together, you get black.
This uses the mix-blend-mode CSS property with a value of multiply to achieve the results. Unfortunately this is not supported in IE.
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:100px;
height:100px;
opacity:1;
}
.red{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==);
}
.blue{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPj/HwADBwIAMCbHYQAAAABJRU5ErkJggg==);
mix-blend-mode: multiply
}
</style>
</head>
<body>
<div class="red">
</div>
<div style="position:absolute;top:90px" class="blue">
</div>
</body>
</html>You can achieve this effect by giving .box-1 an absolutely positioned ::after pseudo-element (positioned at bottom:0;) with a height calculated as 100% of its .box-1 parent minus the vertical offset position of .box-2.
Eg. If .box-2 has a top: value of 200px, then the height of the ::after pseudo-element on .box-1 should be:
height: calc(100% - 200px); /* 200px is the top: value of .box-2 */
Working Example (with .box-1 at 4 different heights - the last .box-1 is resizable):
.wrapper{
display: inline-block;
width: 200px;
height: 500px;
background-color: #fff;
position: relative;
}
.box{
width: 100%;
position: absolute;
}
.box-1{
top: 0px;
background-color: rgb(128,191,128);
}
.box-2{
top: 200px;
height: 300px;
background-color: rgb(128,128,255);
}
.wrapper .box-1 {
z-index: 6;
}
.wrapper .box-1::after {
content: '';
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: calc(100% - 200px); /* 200px is the top: value of .box-2 */
background-color: rgba(0,0,0,1);
}
div:nth-of-type(1).wrapper .box-1 {
height: 250px;
}
div:nth-of-type(2).wrapper .box-1 {
height: 275px;
}
div:nth-of-type(3).wrapper .box-1 {
height: 300px;
}
div:nth-of-type(4).wrapper .box-1 {
height: 325px;
}
div:nth-of-type(4).wrapper .box-1 {
resize: vertical;
overflow: auto;
}<div class="wrapper">
<div class="box box-1">
</div>
<div class="box box-2">
</div>
</div>
<div class="wrapper">
<div class="box box-1">
</div>
<div class="box box-2">
</div>
</div>
<div class="wrapper">
<div class="box box-1">
</div>
<div class="box box-2">
</div>
</div>
<div class="wrapper">
<div class="box box-1">
</div>
<div class="box box-2">
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
