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

Question

我需要使用CSS混合两个元素的背景颜色。我已经尝试了 background-blend-mode: multiply，但它只适用于将两种颜色放在同一个元素中。

我需要实现类似于这样的效果 -

---

我一直在搜索，但是还没有找到答案。最有帮助的资源是 CSS中的新混合特性，其中展示了如何使用Canvas实现。是否可能使用CSS做同样的事情？ 编辑

---

这里的圆圈只是一个示例，用于展示我需要的内容。正如我所提到的，我正在寻找两个不同元素的颜色混合。我已经为我需要混合的实际形状创建了一个 fiddle。 http://jsfiddle.net/fmgfsr4o/2/

- Kshitiz

---

我找到了这个问题，可能会有帮助。 - Laurent S.

你尝试过在同一个元素上使用多个背景吗？就像这样：第一个背景是左侧的红色圆圈，第二个背景是右侧的绿色圆圈。我认为你可以用纯CSS绘制它，也许需要一些渐变或类似的东西。此外，你可以尝试使用CSS伪元素（:after和:before）进行调整。 - pomeh

基本上...不行。混合模式在CSS中尚未提供，也没有CSS的替代方案。但你或许可以在JS中实现一些东西。 - Paulie_D

@Paulie_D CSS混合模式似乎在最新的Firefox、Chrome和Opera中都可用，甚至在Android版的Chrome中也可以使用，试试看：http://caniuse.com/#feat=css-backgroundblendmode - pomeh

@Paulie_D 是的，你说得对。感谢你指出来。KshitizShankar 那只是一个想法，几乎是正确的，因为我已经做过了（请看下面我的答案）。但是这样的形状肯定会增加另一层复杂性... - pomeh

Answer 1

尝试使用这个纯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

翻译后为：

{{链接1：JSFiddle}}

- Dyspraxic Designer

---

我正在寻找使用CSS的解决方案。我已经知道可以使用JS和Canvas实现它。 - Kshitiz

DyspraxicDesigner，你的编辑对你的回答来说是一个太激进的改变，它完全改变了你回答的内容（从JavaScript解决方案变成CSS解决方案）。将来请注意这一点，因为现在@KshitizShankar必须重新考虑你的回答。如果你真的想做出如此激进的改变，请发布一个新的答案，然后删除第一个答案。谢谢。 - pomeh

Answer 2

你可以通过将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指出）。

- pomeh

---

正如我所提到的，我需要合并“2个元素”的背景颜色，圆形只是一个例子，我的形状要复杂一些，并且需要使用不同的HTML元素创建（例如，考虑两个重叠的菱形）。这是否可以用CSS实现？ - Kshitiz

@KshitizShankar 我不确定是否可能，background-blend-mode 只适用于一个元素。请更新您的问题并详细说明您需要什么：我的答案似乎符合您的问题，但您的问题与您实际需要的不符，因此您永远无法以这种方式找到有用的答案。 - pomeh

我已经编辑了问题并附上了一个 fiddle，展示了我需要混合的实际形状。虽然我不确定是否可以使用 CSS 实现它。 - Kshitiz

我也不太确定 :/ 你的 fiddle 示例中使用了伪元素:after和 :before，但它们被视为不同的元素，所以不能在它们之间使用混合模式。如果形状在图像中，并且你使用了background-image:url(firstShape), url(secondShape)，那么可能会起作用，但这需要使用外部图像，而且可能不是你想要的:/ - pomeh

是的，我猜CSS不行。也许将来会有所改善！非常感谢您的所有帮助。我想我会坚持使用图像，然后使用CSS混合它们。 - Kshitiz

当然可以，我希望mix-blend-mode在不久的将来能在浏览器中使用。 :) - Kshitiz