CSS技巧：模糊背景，突出焦点区域
如何在网页设计中，既能营造朦胧的背景氛围，又能清晰地突出重点区域呢？本文将介绍一种巧妙的CSS方法，实现模糊背景的同时，保持特定区域的清晰透明。
设计目标
假设页面中有一个动态移动的div元素，代表眼动追踪区域。我们需要让该区域下方的内容保持清晰可见，而其他区域则呈现模糊的背景效果。
立即学习“前端免费学习笔记（深入）”；
技术方案
我们将结合backdrop-filter和mask两种CSS属性来实现这一效果。
模糊背景效果
backdrop-filter属性允许我们对元素的背景应用滤镜效果。 使用blur()函数即可轻松创建模糊效果。以下代码将为页面元素添加5像素的模糊背景：
.wrap {
backdrop-filter: blur(5px);
}
局部透明蒙版
mask属性则用于创建形状遮罩。这里，我们将创建一个圆形蒙版，其中心与眼动追踪区域重合。通过transparent和red（或其他颜色）的径向渐变，实现蒙版内的透明效果。
.wrap {
-webkit-mask: radial-gradient(circle at calc(var(--x, .5) * 100%) calc(var(--y, .5) * 100%), transparent 50px, red 51px);
}
完整CSS代码
将以上两段代码结合，即可实现最终效果：
.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);
}
动态交互
通过自定义变量--x和--y，可以动态控制模糊区域的中心位置，实现交互式效果。 一个在线演示：CodePen演示链接 (请替换为实际CodePen链接)
通过这种方法，您可以轻松创建具有视觉层次感的网页设计，在模糊的背景下突出重要的焦点区域，提升用户体验。
