登录界面图片模糊处理：几招搞定背景图太清晰抢了输入框风头

做登录页时，很多人喜欢放一张高清大图当背景，比如城市夜景、咖啡馆角落、代码编辑器截图……但问题来了：图太清楚，用户一眼就被背景吸走注意力，反而找不到用户名密码框在哪。

为什么模糊一下更舒服？

不是图不好，是它太‘抢戏’。适当模糊后，视觉重心自然落到中间的表单区域——就像拍人像时虚化背景，人立马突出。浏览器原生就支持这个效果，不用装插件，也不用PS导出新图。

CSS 一行代码搞定

给登录页背景容器加个 filter: blur(8px) 就行。比如你的HTML长这样：

<div class="login-wrapper">
  <form>
    <input type="text" placeholder="用户名">
    <input type="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>
</div>

对应的CSS可以这么写：

.login-wrapper {
  background: url('login-bg.jpg') center/cover no-repeat;
  filter: blur(6px);
  position: relative;
}
.login-wrapper::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 1;
}
.login-wrapper form {
  position: relative;
  z-index: 2;
  max-width: 400px;
  margin: 100px auto;
  padding: 30px;
  background: #fff;
  border-radius: 8px;
}

注意：blur() 会把整个容器（包括里面的表单）一起糊掉，所以得用 ::before 叠一层半透明白罩，再把表单提出来（z-index: 2），这样只有背景虚化，输入框清清楚楚。

不同场景调参小建议

模糊值别死记硬背：
• 文字多的背景图（比如带标语的海报）→ blur(10px) 起步，不然字影还隐约可见；
• 纯色渐变或低对比图 → blur(3px) 就够，糊太多反而显脏；
• 想保留一点纹理感（比如木纹、水泥墙）→ 试 blur(4px) + opacity: 0.9 组合。

顺手避个坑

别直接对 body 或整页 div 加 filter，否则所有子元素都会被模糊，包括按钮、图标、甚至你刚加的 loading 动画。老老实实套个独立容器，样式才可控。

下次改登录页，先打开开发者工具，右键背景层，敲两行CSS试试——糊得恰到好处，用户一进来就知道该点哪、该输啥。