直接给img加background-color不生效，因其默认为inline元素且无显式宽高，背景无法渲染；懒加载时src常为空或移至data-src，导致img成空标签，fallback亦不触发，须用容器包裹并设样式。

为什么直接给 img 加 background-color 不生效

因为 img 默认是 inline 元素，不设 display: block 和显式宽高，背景根本不会渲染；更关键的是，懒加载常把 src 清空或挪到 data-src，此时 img 就是空标签，连 fallback 都不触发。必须用容器包裹，比如 <div class="skeleton-img"></div>，再对这个 div 设样式。

background-position 动画不动？检查这三处

写完 @keyframes shine { to { background-position: 200% 0; } } 却没效果，大概率不是语法错，而是背景本身不可平移：

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

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

下载

• 背景必须是「有纹理」的：用 linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)，别用纯色 background: #f0f0f0
• background-size 必须大于容器宽度：比如 background-size: 200px 100%（不能用 rem 或 vw，iOS Safari 会忽略）
• 动画必须配 background-repeat: no-repeat，否则光条重复出现、跳变

多个骨架块怎么避免“齐步走”

所有骨架一起滑，反而显得假——真实加载是异步的。CSS 不支持随机 delay，但可用预设 stagger 打破同步：

• 给不同区块加语义 class：.skeleton-avatar、.skeleton-title、.skeleton-paragraph
• 分别设 animation-delay: 0s、0.2s、0.4s，形成自然错落
• 别用 JS 动态加 delay：首屏骨架必须纯 CSS，否则 SSR 或禁 JS 环境下失效

移动端圆角边缘发虚、光效错位？

尤其在 iPhone 上，骨架圆角区域常露出白边，或扫光动画卡顿——不是代码逻辑问题，是渲染层细节没控住：

• 每个骨架容器必须加 overflow: hidden，否则渐变滑出圆角会露底色
• 避免用 transform: translateX() 模拟扫光：Safari 和部分安卓 WebView 中边缘发虚、锯齿明显
• background-position 动画比 transform 更稳，因它只改绘制起点，不触发重排重绘
• 图片类占位优先用 aspect-ratio: 16 / 9 + width: 100%，别写死 height，否则缩放失真

真实项目里最容易被忽略的，是 background-size 单位和 overflow: hidden 的组合——iOS Safari 对 rem 单位完全不认，而漏掉 overflow 会导致圆角区域直接穿帮。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！