img::before 默认不生效，因 img 是替换元素，浏览器按规范禁止渲染其伪元素；需同时满足 display 为 block/inline-block、position: relative、有明确宽高三条件才可能显示。
img::before 为什么默认不生效
直接写 img::before { content: ""; background: #eee; } 不会显示任何东西，因为 img 是替换元素（replaced element），浏览器按规范禁止在其上渲染伪元素。哪怕加了 content: ""、position: absolute，开发者工具里也看不到该伪元素——它被静默忽略，不是 bug，也不是兼容性问题。
让 img::before 生效的三个硬性条件
必须同时满足以下三点，::before 才可能渲染出来：
-
img的display必须显式设为block或inline-block（不能靠父容器“影响”） -
img必须有position: relative（否则::before的absolute会相对错位祖先定位） -
img必须有明确宽高（或由父容器约束出尺寸），否则::before没法铺满
示例关键样式：
.safe-img {
display: inline-block;
position: relative;
width: 200px;
height: 150px;
}
.safe-img::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #f0f0f0 url("/placeholder.svg") center/contain no-repeat;
}
纯 CSS 无法检测加载失败，必须配合 JS 状态标记
::before 是静态视觉层，它不会因为图片 404 就自动出现，也不会因加载成功就消失——它始终存在。所以仅靠 CSS 做不到“失败时显示、成功时隐藏”。真正可行的是用 JS 标记状态，再由 CSS 响应：
立即学习“前端免费学习笔记（深入）”；
- 在
img上加onerror="this.classList.add('load-failed')" - CSS 写
img.load-failed::before控制占位图样式 - 同时加
img.load-failed { opacity: 0; }隐藏原图（避免文字叠加） - 注意：不要在
onerror里改this.src，否则可能触发二次请求或循环错误
比 ::before 更稳的兜底方案：容器 background
如果项目要兼顾旧浏览器、SEO 或 SSR 场景，推荐放弃 img::before，改用 div 容器 + background-image：
- 把占位图设在容器的
background上（支持 transition 和渐变） - 真实图片用
img叠在上面，加载成功后通过opacity或visibility切换显示 - 这样既绕过伪元素限制，又能让占位图参与 CSS 动画和响应式计算
- 注意：容器需设
background-size: cover或contain，并确保宽高约束稳定
最易被忽略的一点：无论用哪种方式，img 的 alt 属性仍必须保留——它不只是给屏幕阅读器用的，也是 JS fallback 时可读取的原始提示来源。
