如何使一个div的部分区域变透明而其他部分模糊掉?

维罗尼卡住了
  • 15

背景
页面上有一个不停移动的div标签(眼部追踪区域)
这个div外层还有一个div 里面有一些按钮、图片、文字之类的

现在想让这个活动的div下方的内容变为透明 其他部分模糊掉 如何实现呢?

回复
阅读 1.6k
1 个回答
✓ 已被采纳

模糊可以用 backdrop-filter 实现,然后部分透明可以用 mask 来实现

.wrap{
  backdrop-filter: blur(5px);
  -webkit-mask: radial-gradient( circle at calc(var(--x, .5) * 100% )  calc(var(--y, .5) * 100% ), transparent 50px, red 51px);
}

下面写了一个demo,你可以根据需求调整一下

https://codepen.io/xboxyan/pe...

动画.gif

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏