Mieszanie kolorów tła 2 elementów za pomocą CSS

Question

Potrzebuję mieszać kolory tła 2 elementów za pomocą CSS Przeszukuje mnie z background-blend-mode:multiply, ale działa tylko wtedy, gdy mam 2 kolory w tym samym elemencie.

muszę osiągnąć coś takiego -

---

I zostały poszukiwania dużo, ale nie byli w stanie zrozumieć. Najbardziej przydatny zasób, który znalazłem, to http://blogs.adobe.com/webplatform/2012/07/17/new-blending-features-in-css/, który pokazuje, jak to zrobić, używając Canvas. Czy można zrobić to samo za pomocą CSS?

EDIT

---

Okręgi powyżej były tylko przykładem, aby pokazać to, co potrzebne. Jak wspomniałem, szukałem mieszania kolorów dla 2 różnych elementów. Stworzyłem skrzypce dla moich rzeczywistych kształtów, które muszę połączyć. http://jsfiddle.net/fmgfsr4o/2/

Answer 1

Można połączyć wiele CSS tło z radialne gradienty, aby osiągnąć ten efekt:

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> 

Zrobiłem JSFiddle aby spróbować: http://jsfiddle.net/pomeh/07nLpwwj/

Wynika to ja się za pomocą Firefox 31:

Nawet jeśli wsparcie przeglądarka wydaje się „poprawne” (patrz tutaj http://caniuse.com/#feat=css-backgroundblendmode), prosimy zauważ, że właściwość background-blend-mode ma obecnie status rekomendacji kandydata, więc należy zachować ostrożność podczas jej używania (dzięki @Paulie_D za wskazanie tego).

Answer 2

Wypróbuj ten czysty CSS3, chociaż musisz dowiedzieć się, jak ustawić kółka.

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