直接给加背景色或动画无效，因其是无宽高的inline替换元素；必须用容器包裹并设aspect-ratio或padding-top固定比例，配合background渐变扫光动画和opacity过渡实现平滑占位。
直接给 <img alt="初学者怎么用CSS为网页图片添加优雅的骨架屏加载占位？" > 加背景色或动画基本无效——它默认是 inline 元素，没宽高、没内容、没渲染上下文，骨架根本出不来。
为什么不能直接在 <img alt="初学者怎么用CSS为网页图片添加优雅的骨架屏加载占位？" > 上写骨架样式
常见错误现象：写了 img { background: #f0f0f0; }，页面一片空白；或者加了 @keyframes 但扫光不动。原因很实在：
-
<img alt="初学者怎么用CSS为网页图片添加优雅的骨架屏加载占位？" >是替换元素，不设display: block和显式width/height，background 就不会绘制 - 懒加载时
src被清空或挪到data-src，<img alt="初学者怎么用CSS为网页图片添加优雅的骨架屏加载占位？" >变成“空标签”，连 fallback 都不触发 - 伪元素（如
::before）无法可靠继承<img alt="初学者怎么用CSS为网页图片添加优雅的骨架屏加载占位？" >的尺寸，尤其在 flex/grid 容器里容易塌陷或错位
必须用容器包裹，并撑开固定比例空间
真实项目中，图片占位最怕加载时“抖一下”——那是高度坍缩导致的重排。解决方案不是 JS 计算，而是纯 CSS 固定比例：
- 首选
aspect-ratio: 16 / 9（Chrome 88+、Firefox 89+、Safari 15.4+ 原生支持） - 需兼容 iOS 15.0–15.3？加 fallback：
padding-top: 56.25%+position: relative+ 内部子元素position: absolute - 容器必须设
overflow: hidden，否则扫光动画滑出圆角会露底色 - 别用
height: auto或max-width: 100%，骨架层一旦失高，真实图片进来就会顶开布局
扫光动画怎么写才不翻车
核心不是“动起来”，而是“动得准、动得稳”。很多初学者复制代码后发现光条卡住、重复、或边缘发虚，问题往往出在三个参数上：
立即学习“前端免费学习笔记（深入）”；
- 背景必须是渐变纹理：
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)，纯色背景background-position位移无效 -
background-size必须大于容器宽度，推荐200px 100%（禁用rem或vw，iOS Safari 会忽略） - 动画必须配
background-repeat: no-repeat，否则光条重复出现、跳变 - 起始位置建议
background-position: -200% 0，终点200% 0，时长2s，缓动用ease比linear更自然
图片加载完成时如何平滑替换不闪不跳
最常被忽略的细节：骨架和真实图片必须在同一视觉层叠上下文中对齐，且切换只靠 opacity 过渡，不碰 layout。
- 真实
<img alt="初学者怎么用CSS为网页图片添加优雅的骨架屏加载占位？" >要绝对定位盖在骨架容器上，初始设opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100% - 监听
img.onload后，只加一个 class（如is-loaded），里面仅写opacity: 1—— 过渡由transition: opacity 0.3s ease承担 - 如果骨架是容器的
::before，记得在.is-loaded::before { display: none; }关掉它，否则会叠在图片上 - 千万别用
display: none或visibility: hidden → visible切换，前者触发布局重排，后者不触发 CSS 过渡
真正难的不是写出骨架，而是让骨架和真实图片在所有设备、所有加载时机下保持尺寸一致、定位精准、过渡无感——尤其是 Safari 的 aspect-ratio 兼容性、iOS 圆角溢出、以及 SSR 场景下内联样式的注入时机，这些点稍有疏忽，用户看到的就是白屏或抖动，而不是“优雅”。
