Blending 2 Elemente Hintergrundfarben mit CSS

Question

Ich brauche die Hintergrundfarben aus 2 Elementen mischen CSS Ich habe mit den background-blend-mode:multiply Hantieren aber das funktioniert nur, wenn ich die 2 Farben im gleichen Elemente habe.

Ich brauche so etwas zu erreichen -

---

Ich habe viel gesucht, aber nicht in der Lage, es herauszufinden. Die hilfreichste Ressource, die ich gefunden habe, war http://blogs.adobe.com/webplatform/2012/07/17/new-blending-features-in-css/, die zeigt, wie man es mit Canvas macht. Ist es möglich, dasselbe mit CSS zu tun?

EDIT

---

Die Kreise waren über nur ein Beispiel zu zeigen, was ich brauchte. Wie gesagt, ich habe nach Farben für 2 verschiedene Elemente gesucht. Ich habe eine Geige für meine tatsächlichen Formen geschaffen, die ich vermischen muss. http://jsfiddle.net/fmgfsr4o/2/

Answer 1

Sie können CSS mehrere Hintergrund mit Radial-Gradienten kombinieren, um diese Wirkung zu erzielen:

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> 

Ich habe eine JSFiddle für Sie getan, um zu versuchen: http://jsfiddle.net/pomeh/07nLpwwj/

Dies ist das Ergebnis, das ich Firefox 31 mit bekommen:

Auch wenn die Browser-Unterstützung „richtige“ (siehe hier http://caniuse.com/#feat=css-backgroundblendmode) scheint, bitte Beachten Sie, dass die Eigenschaft background-blend-mode den Status der Kandidatenempfehlungen hat. Seien Sie also vorsichtig, wenn Sie sie verwenden (dank @Paulie_D, um dies zu verdeutlichen).

Answer 2

Probieren Sie dieses reine CSS3, obwohl Sie herausfinden müssen, wie Sie die Kreise positionieren.

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