Question

我有一个适用于additive color mixing的网页设计。所需的效果是：红色方块覆盖绿色方块，重叠区域显示为黄色。

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

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

Answer 1

方法1：

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

访问chrome：// flags /和＆＃34;启用实验性Web平台功能＆＃34;看效果。

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

使用具有多个背景渐变的背景混合模式也可以在单个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的效果相同。适用于大多数浏览器。

测试： FF 7+; Chrome 16+; IE 10+; Opera 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甚至任何其他光栅图形格式实现类似于您想要的视错觉。

诀窍是仅绘制基色中的每隔一个像素，以便光栅和彩色透明像素交替显示。如果您将两张这样的图像放在彼此不同的基色上，添加色混合将产生观察者的眼睛，最终的颜色看起来像一种加色混合。

enter image description here

回到你的问题：你可以使用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来制作绿色和红色方块，并使用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/

希望这有帮助。

Answer 4

这是一种使用HTML5画布替代CSS的方法：

Demo #9激活三种颜色的添加剂混合：红色，绿色和蓝色。 HTML5画布的混合功能有助于混色。 globalCompositeOperation属性设置为'screen'值。

ctx.globalCompositeOperation = 'screen';

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

4 个答案: