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

Question

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

我需要实现这样的目标 -

---

我已经搜索了很多，但无法弄清楚。 我找到的最有用的资源是New blending features in CSS，它展示了如何使用 Canvas 进行操作。 是否可以使用 CSS 做同样的事情？

编辑

---

上面的圆圈只是显示我需要的示例。正如我所提到的，我正在寻找两种不同元素的混合颜色。我为我需要混合的实际形状创建了一个小提琴。 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/

这是我使用 Firefox 31 得到的结果：

即使浏览器支持看起来“正确”（参见此处http://caniuse.com/#feat=css-backgroundblendmode），请注意background-blend-mode 属性目前处于候选推荐状态，因此在使用时要小心（感谢@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