如何用CSS打造模糊背景突出焦点区域？

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链接)

通过这种方法，您可以轻松创建具有视觉层次感的网页设计，在模糊的背景下突出重要的焦点区域，提升用户体验。