css - 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 中工作。

这里有两个关于这个主题的很好的引用:

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

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

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