如何修改或移除图片背景色？解决网站暗黑模式下图片显示问题

你当前的暗黑模式仅修改了body的背景色，但使用的PNG图片带有白色背景，在深色背景下会显得很突兀。以下是几种实用的解决方案：

方法1：使用混合模式适配背景 #

通过CSS的mix-blend-mode让图片与背景自动融合，会直接消除白色背景，保留图片的深色内容：

.ddark {
  background-color: #303030;
}

.ddark img {
  mix-blend-mode: multiply;
}

方法2：反转图片颜色 #

如果希望图片在暗黑模式下变成浅色（适配深色背景），可以用filter反转颜色：

.ddark {
  background-color: #303030;
}

.ddark img {
  filter: invert(1);
}

方法3：替换为透明背景图片 #

最彻底的方式是直接使用带透明背景的PNG图片，这样无论背景是什么颜色，图片都能自然显示。

完整修改后的代码示例 #

CSS

.ddark {
  background-color: #303030;
}

/* 选择上述任意一种样式即可 */
.ddark img {
  mix-blend-mode: multiply;
}

JavaScript

const dark = document.getElementById("dark");

dark.addEventListener("click", function() {
  const body = document.body;
  body.classList.toggle("ddark")
})

HTML

<img src="https://simg.nicepng.com/png/small/13-133407_pixel-heart-png-black-pixel-heart-icon-png.png" alt="像素心图标" style="width:50px; height:50px;">
<button class="darkmode" id="dark">Go Dark</button>

如果只想针对特定图片生效，可以给图片添加专属类名（比如class="theme-aware-image"），然后把CSS选择器改成.ddark .theme-aware-image，避免影响页面其他图片。

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