如何在PHP编写的登录页面代码中添加背景图片

你当前使用的是基于AdminLTE的后台模板，原有bg-black类设置了纯黑背景，直接通过内联CSS覆盖样式是侵入性最低、最适合新手的实现方案，不需要修改公共的header、footer文件，步骤如下：

前置准备 #

• 在项目中存放静态资源的目录（没有的话可以在登录页同级目录新建assets文件夹）放入你准备好的背景图，建议命名为login-bg.jpg，优先选分辨率1920*1080以上、压缩后大小2M以内的图片，避免加载过慢
• 确认图片相对路径：如果登录php文件在项目根目录，图片放在根目录的assets文件夹下，访问路径就是./assets/login-bg.jpg

核心代码修改 #

1. 替换原有body标签
   你原来的body标签带bg-black类，黑色背景会层级更高盖住自定义图片，直接替换为以下代码：

<body class="hold-transition login-page" style="background: url('./assets/login-bg.jpg') no-repeat center center fixed; background-size: cover; height: 100vh; margin:0;">

样式属性说明：

• no-repeat：禁止背景图重复平铺
• center center：背景图水平、垂直方向都居中展示
• fixed：页面滚动时背景图固定位置
• background-size: cover：自动等比缩放图片，铺满整个屏幕不会出现白边
• height:100vh：强制body高度占满整个浏览器视口

可选优化（推荐做，显示效果更好） #

如果背景图色彩偏亮，会导致白色标题、登录表单看不清，可以给对应元素加样式优化对比度：

• 调整页面标题样式，找到h2标签替换为：

<h2 style="color:#fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); margin-top: 5vh;"><b><?php echo $_SESSION['system']['name'] ?> - Admin</b></h2>

• 给登录卡片加半透明毛玻璃效果，找到<div class="card">标签替换为：

<div class="card" style="backdrop-filter: blur(8px); background: rgba(255,255,255,0.85); border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.3);">

常见问题排查 #

• 背景图加载失败：优先检查图片路径是否正确，不要写本地电脑的绝对路径（比如C:/users/xx/1.jpg），这类路径上传到服务器后会失效，必须用项目内的相对路径
• 图片被其他颜色遮挡：按F12打开浏览器开发者工具，选中body元素查看生效的样式，把优先级更高的背景色属性删掉即可
• 图片变形：确认保留了background-size: cover属性，不要手动设置宽高拉伸图片

内容的提问来源于stack exchange，提问作者Puneet