如何使用CSS ::before在图片加载失败时显示占位背景？-css教程-PHP中文网

img::before 默认不生效，因 img 是替换元素，浏览器按规范禁止渲染其伪元素；需同时满足 display 为 block/inline-block、position: relative、有明确宽高三条件才可能显示。

如何使用css ::before在图片加载失败时显示占位背景？

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 没法铺满

示例关键样式：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.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;
}