有没有办法在 Web 开发中使用加色混合？

Question

我有一个与additive color mixing 配合使用的网页设计。 想要的效果是：红色方块覆盖绿色方块，重叠区域呈现黄色。

有没有什么好的方法可以使用标准工具（CSS、CSS 透明度/不透明度、透明 png 图像）实现加色混合？

我们希望在设计中应用它的方式：两个图案（例如透明 png 图像）相互叠加 - 两个图案叠加的区域更亮。

Answer 1

方法 1：

现在可以使用 CSS mix-blend-mode 来实现所需的效果。目前仅支持 Chrome。

访问 chrome://flags/ 和“启用实验性 Web 平台功能”查看效果。

http://jsfiddle.net/9AgDm/4/

<div style="width: 200px; height: 200px; background-color: #F00; position: absolute; top: 100px; left: 100px;"></div>
<div style="width: 200px; height: 200px; background-color: #0F0; position: absolute; top: 0; left: 0;"></div>
<div style="width: 200px; height: 200px; background-color: #F00; position: absolute; top: 100px; left: 100px; mix-blend-mode: screen;"></div>

方法 2：

也可以使用 background-blend-mode 在单个 HTML 元素上使用多个背景渐变来实现该效果。

在此处查看浏览器支持： http://caniuse.com/css-backgroundblendmode

http://jsfiddle.net/9AgDm/5/

<div></div>

CSS：

div {
    background-blend-mode: screen;
    background: 
        linear-gradient(to right, #0F0, #0F0),
        linear-gradient(to right, #F00, #F00);
    background-position:
        0 0,
        100px 100px;
    background-repeat: no-repeat;
    background-size:
        200px 200px,
        200px 200px;
    height: 300px;
    width: 300px;
}

方法 3：

使用 SVG 的效果相同。适用于大多数浏览器。

测试于： 法郎 7+；铬 16+； IE 10+；歌剧 12+; Safari 5、6+（在 5.1 上失败）

http://jsfiddle.net/9AgDm/9/

<svg width="300" height="300">
  <defs>
    <filter id="additive">
      <feFlood x="0" y="0" width="200" height="200" flood-color="#0F0" result="a"/>
      <feFlood x="100" y="100" width="200" height="200" flood-color="#F00" result="b"/>
      <feBlend in="a" in2="b" result="ab" mode="screen"/>
     </filter>
  </defs>
  <rect filter="url(#additive)" width="100%" height="100%"/>
</svg>

方法 4：

除了 IE8 及以下版本，canvas 可以在大多数浏览器上运行。以下是一些可以实现加色的示例/库：

http://media.chikuyonok.ru/canvas-blending/

http://www.pixastic.com/lib/docs/actions/blend/

http://canvasquery.com/#blending

Answer 2

当我看到 TheNoble-Coder 的答案时，我想起了我第一次尝试透明度的老方法。您可以使用彩色 GIF、PNG 甚至任何其他光栅图形格式实现与您想要的类似的视觉错觉。

诀窍是每隔一个像素就用基色绘制一次，这样就会出现一个光栅，其中彩色像素和透明像素交替出现。如果您将两张这样的具有不同基色的图像放在一起，加色混合将导致观看者的眼睛，最终颜色看起来像加色混合。

回到您的问题：您可以使用 canvas 或可能还通过 CSS 渐变的组合来创建此类简单的图形效果。

Answer 3

重叠的图像会以某种方式产生混色效果

在下面的代码中，绝对定位已用于将顶部图像与底部图像重叠，并且顶部图像的不透明度已设置为 70% 以使其透明。

  <div>   
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Color_icon_red.svg/220px-Color_icon_red.svg.png" style="width:200px; height:200px; float:left; background-color:#F00; position:absolute; top:100px; left:100px; opacity:0.7;filter:alpha(opacity=70); z-index:2" />
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Color_icon_green.svg/220px-Color_icon_green.svg.png" style="width:200px; height:200px; float:left; background-color:#030; clear:left" />
  </div>
  <!--This Code has been checked in Firefox 16, Chrome8 and IE8(with Activex enabled) -->

在此处查看上述代码的演示：- http://jsfiddle.net/YtAHN/embedded/result/

---

重叠时的彩色 div 无法产生这种效果，但是我们可以使用 CSS 和简单的 CSS 技巧使其看起来像这种效果：

如果您使用 css 和一些技巧，您可以实现看起来像两个重叠的正方形和重叠区域黄色的效果。简单的技巧是你必须添加多个 div 来制作绿色和红色方块，并使用浮动、清晰和不透明度来产生透明效果。检查这个会产生这种影响的简单代码：

<div>
<div style="width:200px; height:100px; float:left; background-color:#F00; opacity:0.7;
filter:alpha(opacity=70);">   <!-- filter:alpha(opacity=xx) Used For IE8 and earlier Compatibility -->
Red Div
</div>
<div style="width:100px; height:100px; float:left; background-color:#F00; clear:left; opacity:0.7;
filter:alpha(opacity=70);">
Red Div
</div>
<div style="width:100px; height:100px; float:left; background-color:#FF0; opacity:0.5;
filter:alpha(opacity=50);">
Overlapping Region
</div>
<div style="width:100px; height:100px; float:left; background-color:#030; opacity:0.7;
filter:alpha(opacity=70);">
Green Div
</div>
<div style="width:100px; height:100px; float:left;  clear:left; opacity:0.7;
filter:alpha(opacity=70);">
Blank Div
</div>
<div style="width:200px; height:100px; float:left; background-color:#030; opacity:0.7;
filter:alpha(opacity=70);">
Green Div
</div>
</div>
<!--This Code has been checked in Firefox 16, Chrome8 and IE8(with Activex enabled) -->

在此处查看上述代码的演示：- http://jsfiddle.net/JqY3r/embedded/result/

---

div 上的简单重叠和透明不会产生这种颜色混合效果，从以下代码中可以看出：

如果您只是使用重叠和透明度，它将不起作用。您必须使用类似上述代码的技巧来产生这样的效果（除了图像，因为图像可用于产生这种颜色混合效果，如第一个示例所示）。 您将看到以下内容代码不能产生上述预期的效果

<div style="width:200px; height:200px; float:left; background-color:#F00; position:absolute; top:100px; left:100px; opacity:0.7;
filter:alpha(opacity=70); z-index:2">  <!-- filter:alpha(opacity=xx) Used For IE8 and earlier Compatibility -->
</div>
<div style="width:200px; height:200px; float:left; background-color:#030; opacity:0.7;
filter:alpha(opacity=70); clear:left">
</div>
<!--This Code has been checked in Firefox 16, Chrome8 and IE8(with Activex enabled) -->

在此处查看上述代码的演示：- http://jsfiddle.net/9AgDm/embedded/result/

希望这会有所帮助。