CSS如何解决图片加载前的占位颜色_借助background背景

作者：袖梨 2026-07-17

必须用容器包裹img并设置宽高和background才能实现占位色，单独给img设background-color无效；加载完成通过JS添加类名配合opacity过渡实现平滑显示。

图片加载前如何用 background 预设占位色

直接给 <img> 元素设 background-color 是无效的——<img> 是替换元素，自身不渲染背景，除非它有宽高且内容（即图片）还没加载出来，但此时浏览器默认只留空或显示缺省图标。真正可靠的方式是用 background 覆盖在容器上。

必须用容器包裹 img 才能生效

单独对 <img> 设置 background 不起作用；得用一个 <div> 或其他块级元素包住它，并让该容器承担占位职责：

<div class="img-placeholder">  <img src="photo.jpg" alt="描述"></div>

然后对 .img-placeholder 设背景和尺寸：

width 和 height 必须显式设置（否则容器高度为 0，背景不可见）
background-color 或 background-image 写在容器上
background-size: cover / contain 可配合伪图使用，但纯色占位只需 background-color
若需响应式，用 aspect-ratio 替代固定 height（现代浏览器支持），避免布局抖动

加载完成时如何平滑过渡掉背景

图片加载完成后，如果容器背景还盖着，会遮挡图片。常见做法是监听 load 事件并移除背景，但更稳妥的是用 CSS 的 background-image + img 叠加，靠层级控制：

立即学习“前端免费学习笔记（深入）”；

把占位背景写成 background-image: linear-gradient(#f0f0f0, #e0e0e0)，而非 background-color，方便后续用 background-image: none 切换
给 <img> 加 display: block; width: 100%; height: 100%，确保填满容器
利用 opacity 或 visibility 做淡入效果（注意：直接改 background 无法触发 transition，需用 background-image + transition）

示例关键 CSS：

.img-placeholder {  width: 300px;  height: 200px;  background-image: linear-gradient(#f5f5f5, #e5e5e5);  background-size: 100% 100%;  transition: background-image 0.2s ease;}.img-placeholder img {  display: block;  width: 100%;  height: 100%;  opacity: 0;  transition: opacity 0.3s ease;}.img-placeholder img.loaded {  opacity: 1;}

JS 中只需在 img.onload 时加 loaded 类即可。