如何使用CSS定位实现在图片加载失败时显示占位文本？-css教程-PHP中文网

img 元素上 ::before/::after 默认不生效，因其为替换元素，浏览器不生成伪元素所需的匿名框；必须用外层容器包裹并配合 onerror 或 data-loaded 状态控制，且容器需有明确宽高或 aspect-ratio。

如何使用css定位实现在图片加载失败时显示占位文本？

img 元素上直接用 ::before 或 ::after 显示占位文本，**默认不生效**——这是规范限制，不是写法错误。

为什么 `::before` 在 `img` 上不显示占位文本？

img 是替换元素（replaced element），浏览器不为其生成用于插入伪元素的匿名框。即使写了 img::before { content: "x" }，所有现代浏览器（Chrome/Firefox/Safari/Edge）都会静默忽略，开发者工具里也看不到该规则生效。

这不是兼容性问题，而是 CSS 规范明确禁止
display: inline-block 或 position: relative 单独加，无法绕过这一限制
伪元素只在非替换元素（如 div、span）或显式设为 display: block 并拥有盒模型的容器中可靠工作

想让占位文本可见，必须用容器包裹 + `onerror`

真正可控的做法是放弃对 img 本身加伪元素，改用外层 div 承载状态和样式：

给 img 外套一层 <div class="img-wrap"></div>
用 onerror 把 img 隐藏，并给容器加类（如 .load-failed）
在 .img-wrap.load-failed::before 中渲染文本，此时伪元素完全可用
务必为 .img-wrap 显式设置 width 和 height（或 aspect-ratio），否则伪元素无尺寸可依

示例关键代码：

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

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

下载

<div class="img-wrap">
  @@##@@
</div>

.img-wrap {
  position: relative;
  width: 120px;
  height: 120px;
}
.img-wrap.load-failed::before {
  content: attr(data-alt);
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: #666;
  font-size: 12px;
  padding: 4px;
}

注意：把 alt 值传给 data-alt，是因为 attr(alt) 在伪元素里读不到 img 的属性值（除非伪元素直接作用于 img，而这又不可行）。

用 `data-loaded` 控制状态比依赖 `onerror` 更灵活

如果项目已用 JS 加载图片（比如懒加载或预加载），推荐用状态驱动而非事件绑定：

初始时 <img src="broken.jpg" alt="用户头像" onerror="this.style.display='none'; this.parentNode.classList.add('load-failed'); this.onerror=null;">
JS 中监听 load/error，成功则设 data-loaded="true"，失败保持 false
CSS 写 img[data-loaded="false"]::before —— 但这里仍需确保 img 有 display: inline-block 和 position: relative，且宽高明确
这个方案避免了内联 onerror，更易测试和维护