如何设置HTML img标签加载过程中的占位背景为黑色

你给出的方案完全可以实现需求。

原理说明 #

img 属于替换元素，其background-color属性会在图片内容未完全渲染时生效，刚好覆盖你需要的「网速较慢、图片处于加载中」的场景，同时图片加载失败、或者图片本身存在透明区域时，该背景色也会正常显示。

可选优化 #

如果你的图片尺寸是固定的，建议提前给对应类设置和实际图片一致的宽高，避免浏览器还未获取到图片头信息时，img元素高度塌陷导致黑色背景无法正常展示，优化后的示例代码如下：

<img class="black-back" src="abc.png" alt="图片说明">

<style>
.black-back {
  background-color: #000;
  /* 替换为你的图片实际宽高 */
  width: 400px;
  height: 300px;
}
</style>

内容的提问来源于stack exchange，提问作者user173819