content属性仅适用于::before和::after伪元素，禁止用于或普通元素；控制图片应使用background-image并设置宽高。
content 属性根本不能给 <img alt="如何解决CSS content属性在非伪元素中无法显示图片_使用background-image" > 或普通元素设图片
直接在 <img alt="如何解决CSS content属性在非伪元素中无法显示图片_使用background-image" > 标签上写 content: url("icon.png")，或者给 <div> 加 <code>content: url(...)，浏览器会完全忽略——这不是兼容性问题，是 CSS 规范明文禁止的。content 只允许用于 ::before 和 ::after，且仅接受字符串、attr()、url()（仅限伪元素）、计数器等有限类型。对 <img alt="如何解决CSS content属性在非伪元素中无法显示图片_使用background-image" > 元素加 content，不仅无效，还可能干扰其原生渲染逻辑，尤其在 iOS Safari 中表现为图片“占位但不显示”，注释掉反而恢复正常。
想用 CSS 控制图片显示？改用 background-image
真正能通过 CSS 设置图片内容的通用方式是 background-image，它适用于任意块级或替换元素（只要设置了宽高）：
-
<div class="icon"></div>配合.icon { background-image: url("check.png"); width: 20px; height: 20px; } - 必须显式设置
width和height，否则空容器无尺寸，背景不可见 - 路径错误、大小写不匹配、404 均会导致空白；用 DevTools 的 Network 面板确认图片是否成功加载
- 若需响应式缩放，加
background-size: contain或cover，避免拉伸失真
url() 在 content 和 background-image 中的行为差异
虽然两者都支持 url()，但语义和限制完全不同：
-
content: url("x.png")：仅限伪元素；图片作为“生成内容”插入流内，可被display、transform影响，但无法设置background-size或background-position -
background-image: url("x.png")：任意元素可用；图片是装饰层，依赖background-*系列属性控制呈现，且不会影响文档流 - iOS Safari 对
content: url()支持脆弱，尤其在<img alt="如何解决CSS content属性在非伪元素中无法显示图片_使用background-image" >上叠加时易触发渲染 bug；background-image则稳定得多
伪元素里用 content: url() 还是 background-image？看需求
如果只是挂个图标、提示图，且需要精准对齐文字基线或参与 inline 布局，::before { content: url("i.svg"); } 更轻量；但如果要裁剪、缩放、多图层叠加、或适配深色模式（用 background-image: image-set()），必须用 background-image。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的一点：伪元素的 content: url() 加载失败时，整个伪元素不渲染（连占位都没有）；而 background-image 失败只留空白背景，元素本身仍在——这对布局稳定性影响很大。
