怎么可以使透明背景元素层级下的元素不能被看见？

Question

（可能这是一个有毛病的问题，哈哈哈哈，自己先记录一下）

场景：有两个元素A和B，A元素的层级优先级要高于B，A在B上面，并且A与B是重合的，B的面积比A要大，A的背景颜色是透明的，B的背景颜色任意。

问题：怎么通过设置A的css属性，使得与B重合的面积部分只显示A元素(B的重合部分隐藏，相当于只显示A的透明颜色。如果最外层有背景颜色，就显现最外层元素的背景颜色)，重点是A的背景颜色是透明的。

问题补充：我想要的是A固定不动，B在A的下层可运动的情况，使得AB重合的部分B被隐藏

Answer 1

B元素用 clip-path 裁剪掉和A元素重合的部分即可

下面这个网址可以辅助生成 clip-path
https://bennettfeely.com/clippy/

Answer 2

如果要使透明背景元素层级下的元素不能被看见，可以使用 pointer-events: none 样式将该元素的鼠标事件禁用，使得该元素无法响应鼠标事件，从而达到隐藏的效果。具体来说，可以在元素A上应用 pointer-events: none 样式，使得鼠标事件被传递到元素B上，这样就能够实现与B重合的面积部分只显示A元素，而B的重合部分隐藏的效果。