如何使用CSS创建可移动的半透明区域并模糊化背景？-css教程-PHP中文网

如何使用CSS创建可移动的半透明区域并模糊化背景？

霞舞

发布： 2025-02-22 18:56:01

原创

1158人浏览过

如何使用css创建可移动的半透明区域并模糊化背景？

使用CSS打造可移动半透明区域及背景模糊效果

如何在网页中创建一个可拖动的div元素，使其下方的区域保持透明，而页面其他区域则呈现模糊效果？本文提供解决方案。

实现方法：

此效果可通过backdrop-filter和mask CSS属性实现。backdrop-filter用于模糊元素后面的内容，mask则用于创建半透明区域。

立即学习“前端免费学习笔记（深入）”；

代码示例：

奇域

奇域是一个专注于中式美学的国风AI绘画创作平台

查看详情

<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的浏览器兼容性需要考虑。

以上就是如何使用CSS创建可移动的半透明区域并模糊化背景？的详细内容，更多请关注php中文网其它相关文章！