使用CSS打造可移动半透明区域及背景模糊效果
如何在网页中创建一个可拖动的div元素，使其下方的区域保持透明，而页面其他区域则呈现模糊效果？本文提供解决方案。
实现方法：
此效果可通过backdrop-filter和mask CSS属性实现。backdrop-filter用于模糊元素后面的内容，mask则用于创建半透明区域。
立即学习“前端免费学习笔记（深入）”；
代码示例：
<code class="css">.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浏览器 */
}</code>
详细步骤：
- 使用
backdrop-filter: blur(5px);模糊.wrap元素后面的内容。模糊半径可根据需要调整。 - 使用
-webkit-mask: radial-gradient()创建半径为50像素的圆形透明区域，其中心位置由--x和--y变量控制。 为了兼容性，我们还添加了标准的mask属性，使用相同的径向渐变。black 51px确保非透明区域为黑色，避免出现透明区域周围的模糊边缘。
交互式演示：
以下代码提供一个可交互的示例，允许您拖动透明区域并调整其大小：
<code class="html"><div class="wrap"> <div class="handle"></div> </div></code>
<code class="css">: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;
}</code>
<code class="javascript">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);
}</code>
这段代码实现了可拖动的半透明区域，并对背景进行了模糊处理。 通过修改CSS中的blur()值和radial-gradient()中的参数，可以调整模糊程度和透明区域的大小和形状。 记住，backdrop-filter的浏览器兼容性需要考虑。
