使用CSS混合2个元素的背景颜色

Question

我需要使用CSS混合2个元素的背景颜色 我一直在摆弄background-blend-mode:multiply，但只有在同一元素中具有2种颜色时才起作用。

我需要实现这样的事情 -

---

我一直在寻找了很多，但一直没能弄明白。 我找到的最有帮助的资源是http://blogs.adobe.com/webplatform/2012/07/17/new-blending-features-in-css/，它显示了如何使用Canvas进行操作。 使用CSS可以做同样的事情吗？

编辑

---

圆圈上面只是表明我需要什么样的一个例子。正如我所提到的，我一直在寻找2种不同元素的混合颜色。我创建了一个我需要混合的实际形状的小提琴。 http://jsfiddle.net/fmgfsr4o/2/

Answer 1

您可以结合多个CSS背景径向渐变来达到这种效果：

CSS

div { 
    /* adjust the width of the container to adjust circle's 
    overlap size and shape */ 
    width: 80px; 
    height: 50px; 
    /* for debug purpose only */ 
    border: solid blue 1px; 

    background: 
    /* draw the red circle */ 
    radial-gradient(red 0%, red 70%, transparent 70%, transparent 100%) 0 0, 
    /* draw the green circle */ 
    radial-gradient(green 0%, green 70%, transparent 70%, transparent 100%) 0 0; 
    /* the red on the left, the green on the right */ 
    background-position: top left, top right; 

    /* you can make then bigger or smaller */ 
    /* but you have to change width size above too */ 
    background-size: 50px 50px; 
    /* You want both circles to appears once only */ 
    background-repeat: no-repeat; 

    /* you can try with other values too */ 
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode */ 
    background-blend-mode: multiply; 
} 

HTML

<div></div> 

我已经做了的jsfiddle您可以尝试：http://jsfiddle.net/pomeh/07nLpwwj/

这是我开始使用火狐31的结果：

即使浏览器支持似乎“正确”（见这里http://caniuse.com/#feat=css-backgroundblendmode），请请注意0​​属性现在具有候选推荐状态，所以在使用它时要小心（感谢@Paulie_D指出了这一点）。

Answer 2

试试这个纯粹的CSS3，但你需要弄清楚如何定位圆圈。

html { 
height: 100%; 
background: 
    repeating-radial-gradient(
     circle, 
     transparent, 
     transparent 3.5em, 
     tomato 1em, 
     tomato 4.5em 
    ), 
    repeating-radial-gradient(
     circle, 
     transparent, 
     transparent 3.5em, 
     dodgerblue 3.5em, 
     dodgerblue 4.5em 
    ); 

background-blend-mode: multiply; 
background-size: 10em 10em; 
background-position: 
    0 0, 
    5em 5em, 
    10em 5em; 
} 

JSFiddle