我想说我有一些圈子：
<circle class="first"> </circle> <circle class="second"> </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
