我想说我有一些圈子：
- <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
