给定图像的三个版本，每个版本都有一个红色，绿色和蓝色组件，有没有办法将它们叠加以使用HTML和CSS生成原始图像？
我可以使用此 HTML 来叠加它们：
<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>
而这个CSS来混合它们：
#container { position: relative; width: 20em; height: 20em; }
.color { position: absolute; width: 100%; height: 100%; }
#red { opacity: 1; }
#green { opacity: .5; }
#blue { opacity: .333; }
一切都很好，除了显示的颜色强度只有应有的 1/3，结果看起来很暗。
有没有办法将颜色值"提升"3倍？
(请注意，这不是">通过其红色，绿色和蓝色组件生成图像"的副本，这是关于python的。
编辑(简化示例(：
<!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>
这简单地结合了两种颜色，红色和绿色。结果是橄榄色，rgb(128,128,0(，但我想要黄色的rgb(255,255,0(。
要使图像变亮，请使用 CSS 中的 filter: brightness(); 属性。例如，我会将您的蓝色图像设置为 filter: brightness(300%); ，将绿色图像设置为 filter: brightness(200%); 或 filter: brightness(2); 。