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

时间:2012-12-02 12:58:26

标签: html css html5 colors transparency

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

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

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

4 个答案:

答案 0 :(得分:2)

方法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:

使用具有多个背景渐变的背景混合模式也可以在单个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

答案 1 :(得分:1)

当我看到TheNoble-Coder的回答时,我想起了我第一次透明实验的旧方法。您可以使用彩色GIF,PNG甚至任何其他光栅图形格式实现类似于您想要的视错觉。

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

enter image description here

回到你的问题:你可以使用canvas创建这样简单的图形效果,也可以通过CSS渐变的组合来创建。

答案 2 :(得分:0)

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

在下面的代码中,绝对定位用于重叠顶部图像,底部图像和顶部图像的不透明度设置为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/

希望这有帮助。

答案 3 :(得分:-1)

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

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

ctx.globalCompositeOperation = 'screen';