img元素需显式设置尺寸（width/height或aspect-ratio）并设display: block，background-color才生效；推荐#f0f0f0或rgba(240,240,240,1)，避免alpha
img 元素必须显式控制尺寸，background-color 才能生效
直接给 <img> 标签加 background-color 却看不到颜色？大概率是它还没“占地方”。<img> 默认是 inline 元素，不设宽高就没有盒模型，背景色无处可画。
必须满足至少一个条件：
-
width和height同时设置（CSS 或 HTML 属性均可） - 使用
aspect-ratio+width（如aspect-ratio: 16/9; width: 100%;），现代浏览器推荐 - 加上
display: block（否则 inline 状态下文字行高会切开背景）
错误写法：<img src="x.jpg" style="max-width:90%"> → 尺寸为 0×0，背景不可见。
响应式场景下用 aspect-ratio 比固定 height 更安全
写死 height: 200px 在移动端容易拉伸变形；只写 width: 100%; height: auto; 则加载瞬间高度为 0，背景闪一下就消失。
推荐方案（兼容性够用）：
.img-placeholder {
width: 100%;
aspect-ratio: 4/3;
background-color: #f0f0f0;
display: block;
}
注意 Safari 15.4+ 才稳定支持 aspect-ratio；若需兼容更老版本，得回退到 padding-top 技巧（height: 0; padding-bottom: 75%; + position: relative）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
别用 rgba() 做占位色，alpha 不为 1 就会透底
写成 background-color: rgba(240, 240, 240, 0.5) 看似省事，实际会导致父容器背景从图片区域“透出来”——滚动时内容晃眼，视觉失控。
正确做法只有两种：
-
background-color: #f0f0f0（十六进制，最稳） -
background-color: rgba(240, 240, 240, 1)（明确 alpha=1）
透明通道不是装饰项，是占位可靠性的硬门槛。
加载失败时 background-color 仍可见，但前提是尺寸已锁定
现代浏览器在图片 404 或跨域失败时，会显示内置叉号占位符。此时只要 <img> 的宽高或 aspect-ratio 已生效，background-color 就会稳稳铺在叉号背后。
容易被忽略的细节：
- 别依赖父容器背景“透出”——
<img>不继承父级background-color -
bgcolor是过时属性，对<img>完全无效 - 如果用了
object-fit: cover，记得同步设object-position，否则裁剪起点偏移会让占位色露出边角
最简可用组合永远是：width + height（或 aspect-ratio）+ display: block + background-color。少一个，就可能白屏一帧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
