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

Question

我有一个网页设计,可以使用加色混合.所需的效果是:红色方块覆盖绿色方块,重叠区域显示为黄色.

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

我们想要在设计中应用它的方式:两个图案(例如透明png图像)相互叠加 - 两个图案叠加的区域更亮.

Answer 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>

方法二：

该效果还可以通过在单个 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;
}

方法三：

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

测试环境：FF 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>

方法四：

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

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

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

http://canvasquery.com/#blending

Answer 2

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

在下面的代码中，使用绝对定位将顶部图像与底部图像重叠，并将顶部图像的不透明度设置为 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 来制作绿色和红色方块，并使用 float、clear 和 opacity 来产生透明效果。检查这个简单的代码，它将产生这种影响：

<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/

希望这可以帮助。