css中形状的混合模式

我想说我有一些圈子：

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

使用以下css：

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

如何重叠时能达到以下效果？

优选地在css中,或者与canvas元素一起使用.

解决方法

一种可能的方法是使用 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指出的那样,你需要为body(或父元素)设置背景颜色,以便在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

原文地址：https://www.jb51.cc/css/215342.html