透明背景的元素如何遮住兄弟元素?

Question

如题所示
https://codepen.io/action-hon...

有什么比较好的方法可以遮掉圆圈里面的横线？

圆圈可能有很多个，位置不固定

（PS: 由于背景色是渐变的，所以圆圈只能是透明背景）

Answer 1

有一种比较简单的方式可以实现这样的需求，加一个模糊就行

.circle{
    backdrop-filter: blur(10px);
}

Answer 2

意思是圆是透明的，希望它覆盖的线的部分也变成透明的，这做起来很困难，几乎是不可能的；不过有一种方法，加视差滚动，就是圆不再是透明，而是将圆的background设置成渐变的大背景，根据圆的位置，不停的设置background-position，跟背景重合；这种方法经常用在电商的商品图片放大镜功能上。