实现两个元素重叠部分透明的效果

问题遇到的现象和发生背景

实现小程序两个元素重叠部分透明的效果

我想要达到的结果

不使用canvas

貌似css的 mix-blend-mode属性可以做出这种效果

咱也不知道能不能看懂，不过我相信你，把那个0.3的背景改成0.6应该就是这个效果了

使用光的颜色重叠特性，比如光的三原色重叠后就是白色。使用rgba颜色值设置背景色，但css似乎是使用的颜料颜色特性，只会越描越黑。
可以用PS画一个png格式的图片，放在html里可以设置图片整体宽高，不能改变形状。假如你的实际需求，是让俩圆动态移动，交叉部分是可变的，那就不行。否则还是能满足的。
可以强行实现。总div设置背景图。内部俩div（a、b）设置背景透明度，圆角50%，分别加一个子div和相邻div重叠，即a的子div和b本身大小相同，位置相同。ab的子div透明度100%，也有一样的背景图，根据其位置计算其背景定位。溢出隐藏。

用SVG呢？

<svg style="width: 100%;height: 100%;">
            <clipPath id="cp">
                <use xlink:href="#l" />
            </clipPath>
            <g style="fill: white;stroke: white;stroke-width:2;fill-opacity: 0.5;">
                <circle id="l" cx="50" cy="50" r="25" />
                <circle id="r" cx="50" cy="80" r="25" />
            </g>
            <use xlink:href="#r" clip-path="url(#cp)" style="fill:#000000;" />
        </svg>