【问题标题】：blend mode for shapes in csscss中形状的混合模式
【发布时间】：2015-05-13 03:11:50
【问题描述】：

假设我有一些圈子：

<circle class="first">&nbsp;</circle>
<circle class="second">&nbsp;</circle>

使用以下 css：

circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: #000;
}

当它们重叠时如何实现以下效果？

最好在 css 中，或使用 canvas 元素。

【问题讨论】：

如果您愿意使用 SVG - 您可以使用 SVG 过滤器来做到这一点。

标签： css canvas css-shapes

【解决方案1】：

一种可能的方法是使用mix-blend-mode 属性which seems to be mostly not support by now。

这是一个适用于 Chrome 和 Firefox 的示例（感谢 @vals）

body
{
  background-color: white;
}

.circle
{
  border-radius: 100px;
  background-color: white;
  width: 100px;
  height: 100px;
  float: left;
  mix-blend-mode: exclusion;
}

.circle:not(:first-child)
{
  margin-left: -20px;
}

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

就像@vals 指出的那样，您需要为主体（或父元素）设置background-color，以便它在Firefox 中工作。

这里有两个关于这个主题的不错的参考：

https://css-tricks.com/basics-css-blend-modes/

取自此来源：http://codepen.io/chriscoyier/pen/tCykv

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

【讨论】：

Firefox 的问题不在于白色背景上的白色背景；身体没有明确的背景。设置 body { background-color: white;} 它可以在 Chrome 和 FF 中正常工作。 +1，顺便说一句
@vals 非常感谢您的评论。这真的很有趣。我更新了答案并尝试进行更多调查:)

【解决方案2】：

SVG

在

fill-rule 将是您寻找的形状，如果形状重叠，那么您获得的效果就是这种相互形状的颜色。

<svg width="500px" height="200px" viewBox="0 0 100 500">
  <path fill-rule="evenodd" d="
        M 50, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        Z
        M 150, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        Z
        M 250, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        Z
        M 350, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        Z
        M 450, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        Z" />
</svg>

【讨论】：

如果您需要跨浏览器支持，这绝对是您的选择。不错。
@NicoO 我喜欢你的解决方案，但缺乏对它的支持。