Question

给出图像的三个版本，每个版本具有红色，绿色和蓝色成分之一，是否有任何方法可以叠加它们以使用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倍？

（请注意，这不是“ Generate an image through its red, green and blue components”的重复项，它与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）。

Answer 1

要增亮图像，请在CSS中使用filter: brightness();属性。例如，我将蓝色图像设置为filter: brightness(300%);，绿色图像设置为filter: brightness(200%);或filter: brightness(2);。

如何使用HTML和CSS将3个图像分别与红色，绿色和蓝色的组件叠加？

1 个答案: