Open letochagone opened 1 year ago
in the following example I apply the mix-blend-mode but it gives no effect The color of the second div on the first is the same as if we remove the mix-blend-mode property from the div between the two.
========= Cs ( source color) ========= mix-blend-mode ========= Cb( destination color
WITH MIX BLEND MODE
#Cb { width: 100px; height: 100px; background-color: rgba(0,250,0,1); } #blending { width:100px; height:100px; mix-blend-mode:screen; margin-top:-54px; margin-left:24px; } #Cs { width: 100px; height: 100px; margin-top:-74px; margin-left:54px; background-color: rgba(0,0,155,0.7); }
<div id="Cb"></div> <div id="blending"></div> <div id="Cs"></div>
WITHOUT MIX BLEND MODE
#Cb { width: 100px; height: 100px; background-color: rgba(0,250,0,1); } #blending { width:100px; height:100px; ___mix-blend-mode:screen; margin-top:-54px; margin-left:24px; } #Cs { width: 100px; height: 100px; margin-top:-74px; margin-left:54px; background-color: rgba(0,0,155,0.7); }
The result is the same. It's certainly obvious that I misinterpret this property but I can't find where my mistake is
in the following example I apply the mix-blend-mode but it gives no effect The color of the second div on the first is the same as if we remove the mix-blend-mode property from the div between the two.
WITH MIX BLEND MODE
WITHOUT MIX BLEND MODE
The result is the same. It's certainly obvious that I misinterpret this property but I can't find where my mistake is