使用CSS打造可移动半透明区域及背景模糊效果
如何在网页中创建一个可拖动的div元素，使其下方的区域保持透明，而页面其他区域则呈现模糊效果？本文提供解决方案。
实现方法：
此效果可通过backdrop-filter和mask CSS属性实现。backdrop-filter用于模糊元素后面的内容，mask则用于创建半透明区域。
立即学习“前端免费学习笔记（深入）”；
代码示例：
网易人工智能
网易数帆多媒体智能生产力平台
206 查看详情
.wrap { backdrop-filter: blur(5px); -webkit-mask: radial-gradient(circle at calc(var(--x, .5) * 100%) calc(var(--y, .5) * 100%), transparent 50px, black 51px); /* 使用黑色填充非透明区域 */ mask: radial-gradient(circle at calc(var(--x, .5) * 100%) calc(var(--y, .5) * 100%), transparent 50px, black 51px); /* 支持非webkit浏览器 */}详细步骤：
使用backdrop-filter: blur(5px);模糊.wrap元素后面的内容。模糊半径可根据需要调整。使用-webkit-mask: radial-gradient()创建半径为50像素的圆形透明区域，其中心位置由--x和--y变量控制。 为了兼容性，我们还添加了标准的mask属性，使用相同的径向渐变。 black 51px确保非透明区域为黑色，避免出现透明区域周围的模糊边缘。
交互式演示：
以下代码提供一个可交互的示例，允许您拖动透明区域并调整其大小：
:root { --x: .5; --y: .5;}.wrap { position: relative; width: 300px; height: 300px; background: #eee; backdrop-filter: blur(5px); -webkit-mask: radial-gradient(circle at calc(var(--x, .5) * 100%) calc(var(--y, .5) * 100%), transparent 50px, black 51px); mask: radial-gradient(circle at calc(var(--x, .5) * 100%) calc(var(--y, .5) * 100%), transparent 50px, black 51px);}.handle { position: absolute; width: 10px; height: 10px; border: 1px solid #000; background: #fff; cursor: grab;}const handle = document.querySelector('.handle');handle.addEventListener('mousedown', (e) => { document.body.addEventListener('mousemove', move); document.body.addEventListener('mouseup', stopMove);});function move(e) { const wrap = handle.parentElement; const rect = wrap.getBoundingClientRect(); let x = Math.min(Math.max(0, e.clientX - rect.left), rect.width); let y = Math.min(Math.max(0, e.clientY - rect.top), rect.height); document.documentElement.style.setProperty('--x', x / rect.width); document.documentElement.style.setProperty('--y', y / rect.height);}function stopMove() { document.body.removeEventListener('mousemove', move); document.body.removeEventListener('mouseup', stopMove);}这段代码实现了可拖动的半透明区域，并对背景进行了模糊处理。 通过修改CSS中的blur()值和radial-gradient()中的参数，可以调整模糊程度和透明区域的大小和形状。 记住，backdrop-filter的浏览器兼容性需要考虑。
以上就是如何使用CSS创建可移动的半透明区域并模糊化背景？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1143466.html
微信扫一扫 
支付宝扫一扫 
