Учитывая три версии изображения, каждая с одним из красного, зеленого и синего компонентов, есть ли способ наложить их для создания исходного изображения с использованием 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 раза?
(Обратите внимание, что это не aДубликат " Создайте изображение из его красных, зеленых и синих компонентов ", что примерно о питоне.)
РЕДАКТИРОВАТЬ (упрощенный пример):
<!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просто сочетает в себе два цвета, красный и зеленый.Результат оливковый, RGB (128,128,0), но я хочу желтый RGB (255,255,0).