Miscelare i colori di sfondo a 2 elementi utilizzando il CSS

Question

Ho bisogno di fondere i colori di sfondo di 2 elementi usando i CSS Ho giocato con il background-blend-mode:multiply ma funziona solo quando ho i 2 colori nello stesso elemento.

Ho bisogno di realizzare qualcosa di simile -

---

Ho cercato un sacco, ma non sono stati in grado di capirlo. La risorsa più utile che ho trovato è stata http://blogs.adobe.com/webplatform/2012/07/17/new-blending-features-in-css/ che mostra come farlo usando Canvas. È possibile fare la stessa cosa usando i CSS?

EDIT

---

I cerchi sopra erano semplicemente un esempio per mostrare quello che mi serviva. Come ho detto, cercavo di fondere i colori per 2 elementi diversi. Ho creato un violino per le mie forme reali che ho bisogno di fondere. http://jsfiddle.net/fmgfsr4o/2/

Answer 1

È possibile combinare CSS sfondo multipla con radiali-pendenze per ottenere questo effetto:

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> 

Ho fatto un JSFiddle per provare: http://jsfiddle.net/pomeh/07nLpwwj/

Questo è il risultato che ottengo utilizzando Firefox 31:

Anche se il supporto del browser sembra "corretto" (vedi qui http://caniuse.com/#feat=css-backgroundblendmode), si prega di nota che la proprietà background-blend-mode ha lo stato di Candidate Recommendation per ora, quindi fai attenzione quando lo usi (grazie a @Paulie_D per averlo indicato).

Answer 2

Provate questo puro CSS3, anche se avrete bisogno di capire come posizionare i cerchi.

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