现在很多网站和应用的登录页面都采用全屏背景图，视觉上更有冲击力，也提升了用户的第一印象。比如你打开某个视频平台，一张高清剧照铺满整个屏幕，登录框轻轻浮在中间，那种沉浸感一下子就拉近了和用户的距离。
为什么选择全屏背景？
传统的登录页往往只有简单的颜色或小图标，显得单调。而全屏背景能让界面立刻“高级”起来。尤其在移动端或宽屏显示器上，合理利用空间能有效引导用户注意力，让登录动作变得更自然。
如何选图？
背景图不是随便找张好看的就行。太花哨会干扰输入框的辨识度，太暗又可能遮住白色文字。建议选择色调统一、主体偏侧或上下留白的图片。比如城市夜景、渐变光效、低饱和度的人物剪影，这些都比较适合作为底层视觉支撑。
技术实现：HTML + CSS 简单搞定
用几行代码就能让背景图铺满整个视口。关键在于设置 background-size: cover 和固定定位：
<style>\n body, html {\n margin: 0;\n padding: 0;\n height: 100%;\n overflow: hidden;\n }\n .login-container {\n position: relative;\n width: 100%;\n height: 100%;\n }\n .bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: url('login-bg.jpg');\n background-size: cover;\n background-position: center;\n filter: blur(2px); /* 可选：轻微模糊增强可读性 */\n }\n .login-box {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 10;\n background: rgba(255, 255, 255, 0.9);\n padding: 30px;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n }\n</style>上面这段样式会让背景图自动适应屏幕大小，并保持居中裁剪。登录框则用绝对定位固定在画面中央，层级高于背景。
响应式要考虑的问题
手机端屏幕比例多样，有些竖图在iPhone上会被严重裁剪。可以准备两张图：横屏用一张，竖屏用另一张，通过CSS媒体查询切换：
@media (max-height: 600px) {\n .bg {\n background-image: url('login-bg-mobile.jpg');\n }\n}或者直接使用JavaScript动态判断设备方向，加载合适的资源。
性能别忽视
高清图文件大，加载慢会影响用户体验。曾经见过一个登录页因为背景图超过5MB，导致半天打不开输入框。建议把图片压缩到200KB以内，格式优先选WebP，兼容性够用的情况下体积能省一半。还可以配合懒加载策略，先展示模糊占位，再渐进显示清晰图。
加点动效更生动
静态图看久了容易腻。可以尝试缓慢平移背景，或者叠加一层极透明的粒子动画。比如用CSS做轻微抖动：
@keyframes float {\n 0% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n 100% { transform: translateY(0); }\n}\n.bg {\n animation: float 8s ease-in-out infinite;\n}这种细微的动态效果不会抢戏，但能让页面“活”起来。