如何修改<img>标签渐进加载时未完成区域的白色底色？

我太懂你夜间浏览时被加载缓慢的图片那片纯白区域晃眼睛的痛苦了！毕竟渐进式图片的优势就是加载过程中能逐步预览，换掉div背景图的方案确实没必要，下面给你两种针对性的解决方案：

最低要求：将占位区域改为黑色 #

直接用CSS就能实现，给所有<img>标签设置黑色背景，这样在图片渐进加载完成前，img元素的背景会是黑色，完全覆盖刺眼的纯白：

img {
  background-color: #000;
  /* 可选：如果图片有内边距或者边框，也统一设置深色避免违和 */
  padding: 0;
  border: none;
}

这个方案简单直接，完全不影响图片的渐进加载特性——图片加载过程中依然会逐步显示内容，只是背景从白色变成了黑色，完美适配夜间模式。

最优方案：设置为透明 #

如果想要让图片加载时直接融入页面的深色背景，把img的背景设为透明即可：

img {
  background-color: transparent;
}

要是你需要区分夜间/日间模式，可以配合媒体查询，只在深色模式下启用这个样式：

@media (prefers-color-scheme: dark) {
  img {
    background-color: transparent;
  }
}

这样白天浏览浅色背景的网站时，也不会出现图片加载时的违和感。

全局自动生效：用户脚本方案 #

如果你不想手动修改单个网站的CSS，或者想要所有网站都自动适配，可以用Tampermonkey这类用户脚本工具，添加以下脚本：

// ==UserScript==
// @name         夜间模式图片背景优化
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  解决渐进式图片加载时的纯白占位刺眼问题
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // 创建全局样式标签
    const style = document.createElement('style');
    style.textContent = `
        @media (prefers-color-scheme: dark) {
            img {
                background-color: #000 !important; /* 想要透明就改成transparent */
            }
        }
    `;
    document.head.appendChild(style);
})();

这个脚本会自动在所有网站的深色模式下，给img设置黑色（或透明）背景，完全不用你手动干预。

补充说明 #

为什么这个方案比div背景图更合适？因为<img>标签的渐进式加载是浏览器原生支持的，能在图片加载过程中逐步显示从低分辨率到高分辨率的内容；而div背景图必须等图片完全加载完成才会显示，直接失去了预览的特性，这正是你想要避免的情况。

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