Is it possible to overlay three versions of an image, each with red, green, and blue components, in order to recreate the original image using only HTML and CSS?
I have tried this HTML setup:
<div id="container">
<img class="color" id="red" src="red"></div>
<img class="color" id="green" src="green"></div>
<img class="color" id="blue" src="blue"></div>
</div>
And this CSS code for blending:
#container { position: relative; width: 20em; height: 20em; }
.color { position: absolute; width: 100%; height: 100%; }
#red { opacity: 1; }
#green { opacity: .5; }
#blue { opacity: .333; }
While it works, the color intensity is only 1/3 of what is expected, resulting in a dark appearance.
Is there a way to increase the color values by a factor of 3?
(Please note that this question is not the same as "Generate an image through its red, green and blue components", which relates to python.)
EDIT (simplified example):
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<style>
.color { position: absolute; width: 100%; height: 100%; }
#container { position: relative; width: 20em; height: 20em; }
#red { background: rgba(256,0,0,1); }
#green { background: rgba(0,256,0,.5); }
</style>
</head>
<body>
<div id="container">
<div class="color" id="red"></div>
<div class="color" id="green"></div>
</div>
</body>
</html>
This scenario combines red and green colors to produce olive (rgb(128,128,0)), but I aim to achieve yellow (rgb(255,255,0)).