有没有办法在web开发中使用加色混合？ [英] Are there ways to use additive color mixing in web development?

问题描述

我有一个可与加色混合搭配使用的网页设计。
所需的效果是：红色正方形覆盖绿色正方形，重叠区域显示黄色。

有什么好的方法来实现与标准工具CSS，CSS透明/不透明，透明png图像）？

我们想要在设计中应用它的方式：两种模式

解决方案

方法1： b
$ b

现在可以使用CSS混合混合模式实现所需的效果。 Chrome现在只支援。

访问chrome：// flags /和启用实验性网络平台功能

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：

$ b b

也可以在单个HTML元素上使用带有多个背景渐变的背景混合模式来实现此效果。

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

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

 < div>< / div> 
  

CSS：

 code> div {
 background-blend-mode：screen; 
 background：
线性梯度（右，＃0F0，＃0F0），
线性梯度（右，＃F00，＃F00） 
 background-position：
 0 0，
 100px 100px; 
 background-repeat：no-repeat; 
 background-size：
 200px 200px，
 200px 200px; 
 height：300px; 
 width：300px; 
} 
  

方法3：
$ b

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

测试：
FF 7+; Chrome 16+; IE 10+;歌剧12+; Safari 5，6+（5.1版失败）

http ：//jsfiddle.net/9AgDm/9/

 < svg width =300height = 300> 
< defs> 
< filter id =additive> 
< feFlood x =0y =0width =200height =200flood-color =＃0F0result =a/> 
< feFlood x =100y =100width =200height =200flood-color =＃F00result =b/> 
< feBlend in =ain2 =bresult =abmode =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

I have a web design that works with additive color mixing. The desired effect is: red square overlays green square, the overlapping area appears yellow.

Are there any good ways to achieve additive color mixing with standard tools (CSS, CSS transparency/opacity, transparent png images)?

The way we want to apply it in the design: two patterns (e.g. transparent png images) overlay each other - the areas where the two patterns overlay are brighter.

解决方案

METHOD 1:

The desired effect can be achieved using CSS mix-blend-mode nowadays. Chrome support only for now.

Visit chrome://flags/ and "Enable experimental Web Platform features" to see effect.

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>

METHOD 2:

The effect can also be achieved using background-blend-mode with multiple background gradients on a single HTML element.

Check here for browser support: 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;
}

METHOD 3:

Same effect using SVG. Works on most browsers.

Tested on: FF 7+; Chrome 16+; IE 10+; Opera 12+; Safari 5, 6+ (failed on 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>

METHOD 4:

With the exception if IE8 and below, canvas will work on most browsers. Here are a few examples/libraries that could achieve the additive colors:

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

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

http://canvasquery.com/#blending

这篇关于有没有办法在web开发中使用加色混合？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！