推荐用 body::after 伪元素实现网页底层图片：不新增 DOM、不拦截交互、不影响布局；需设 body position: relative，伪元素用 absolute 定位+ z-index: -1；若用 fixed 方案则必须加 pointer-events: none。
图片要真正在网页最底层（不遮挡文字、按钮、表单等任何内容），不能只靠 z-index: -1 或 position: fixed，关键得让它「不参与文档流 + 不拦截交互 + 不影响布局」。
用 body::after 伪元素放到底层（推荐）
这是最干净的做法：不新增 DOM 节点，纯 CSS 控制，天然不拦截点击，且可精准控制尺寸和定位。
-
body必须设position: relative，否则伪元素的absolute会相对根元素定位，容易错位 -
body::after的z-index: -1确保它在所有内容之下；但若页面有其他z-index非 auto 的祖先元素，可能失效——此时需检查父级是否创建了新的层叠上下文 - 背景图路径必须相对于 CSS 文件位置，不是 HTML；本地开发时用
file://协议会触发 CORS，直接用本地服务器（如python3 -m http.server）跑 - 若图是横向条纹，用
background-repeat: repeat-x，并配合height控制显示区域高度，避免拉伸变形
body {
position: relative;
}
body::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 120px;
background-image: url('bottom-strip.png');
background-repeat: repeat-x;
background-position: bottom;
z-index: -1;
}
用 position: fixed + pointer-events: none
适合需要“永远贴屏幕底边”的场景（比如短页面也要看到底部图），但必须加 pointer-events: none，否则会吞掉所有点击、滚动、焦点事件。
- 不写
pointer-events: none是最常见翻车点——用户点不到按钮、打不开下拉菜单、甚至无法选中文本 -
fixed元素默认脱离文档流，不会撑开body高度，所以如果底部图本身需要占空间（比如页脚内容要从它上面开始），就得额外给body加padding-bottom补齐 - 若页面有横向滚动，
width: 100%可能只覆盖视口宽度，超出部分没图——此时改用left: 0; right: 0;更稳妥
<div class="fixed-bg"></div>
.fixed-bg {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background-image: url('bottom-bg.jpg');
background-size: cover;
background-position: center bottom;
pointer-events: none;
}
为什么不用 <img> 标签 + z-index？
很多人试过给 <img src="..."> 加 position: absolute 和 z-index: -1，结果要么图消失，要么挡住内容。根本原因有三个：
立即学习“前端免费学习笔记（深入）”；
-
<img>是替换元素，默认有固有尺寸，z-index在非定位元素上无效；必须显式加position: absolute或relative -
z-index: -1只在当前层叠上下文中生效；如果父容器（比如某个<section>）设了z-index: 1，那里面的-1仍高于外部其他z-index: 0的内容 -
<img>默认会响应鼠标事件，哪怕透明也拦截点击，必须手动加pointer-events: none，但这样又没法做懒加载或图片错误 fallback
真正可靠的底层背景，从来不是“把一张图塞到最下面”，而是让它不进入渲染树的交互层——伪元素和 fixed + pointer-events:none 是仅有的两个可控路径。别碰 <img> 标签方案，除非你明确需要图片的 onload/onerror 回调，且愿意为每一处交互补监听逻辑。
