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

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

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

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

(PS: 由于背景色是渐变的,所以圆圈只能是透明背景)

回复
阅读 1k
2 个回答

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

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

image.png

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

宣传栏