Смешивание 2-х элементов фона с использованием CSS

Мне нужно смешать цвета фона 2 элементов с помощью CSS, который я возился с background-blend-mode:multiply но это работает только тогда, когда у меня есть 2 цвета в одном элементе.

Мне нужно добиться чего-то вроде этого -

Я много искал, но не смог понять это. Самым полезным ресурсом, который я нашел, были Новые функции смешивания в CSS, которые показывают, как это сделать с помощью Canvas. Можно ли сделать то же самое с помощью CSS?

РЕДАКТИРОВАТЬ

Круги выше были просто примером, чтобы показать, что мне нужно. Как я уже упоминал, я искал смешивание цветов для 2 разных элементов. Я создал скрипку для моих реальных форм, которые мне нужно смешать. http://jsfiddle.net/fmgfsr4o/2/

Ответ 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/

В результате я получаю Firefox 31:

Даже если поддержка браузера кажется "правильной" (см. здесь http://caniuse.com/#feat=css-backgroundblendmode), обратите внимание, что свойство background-blend-mode имеет Статус кандидата на данный момент, поэтому будьте осторожны при использовании (спасибо @Paulie_D за указание этого).

Ответ 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