css 中形状的混合模式

Question

假设我有一些圈子：

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

具有以下 css：

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

重叠时如何实现如下效果？

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

Answer 1

一种可能的方法是使用 mix-blend-mode property, 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

Answer 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>

css 中形状的混合模式

blend mode for shapes in css

css

canvas

css-shapes

SVG