如何阻止深色模式反转背景图片？能否强制关闭深色模式？

嘿，这个问题我碰到过好几次，给你两个靠谱的解决方案：

既然你的网页已经是深色配色，完全不需要系统深色模式来瞎掺和，直接告诉浏览器“我自己搞定配色”就行：

1. CSS全局设置：在你的全局样式里加这段，让整个页面只识别深色模式，浏览器就不会自动反转任何内容了：

:root {
  color-scheme: only dark;
}

2. HTML Meta标签：如果CSS设置没生效，在<head>里加这个meta标签更直接：

<meta name="color-scheme" content="dark only">

这俩方法本质都是告诉浏览器：“我的网站已经是深色模式了，不用你帮忙调整”，背景图的自动反转问题直接就解决了。

如果因为某些需求不能完全关闭深色模式适配，那可以针对背景图做反向反转，抵消浏览器的自动处理：

你之前用的filter: invert(0)没用，是因为浏览器的自动反转是在更高层级生效的，咱们得用媒体查询精准触发反向操作：

/* 你原来的header样式 */
#header {
  position: relative;
  background-image: url("../../images/backgroundimage.png");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  color: #fff;
  text-align: center;
  padding: 7.5em 0 2em 0;
  cursor: default;
}

/* 当系统处于深色模式时，反转背景图抵消浏览器的自动反转 */
@media (prefers-color-scheme: dark) {
  #header {
    filter: invert(1);
  }
  /* 如果header里有文字，反转后文字会变黑，给文字容器再加一次反转恢复白色 */
  #header .header-content {
    filter: invert(1);
    color: #fff;
  }
}

记得把header里的文字内容放到一个单独的子容器（比如header-content）里，这样文字不会跟着背景图一起被反转。

如果不想折腾filter，也可以提前准备一张深色模式适配的背景图，用image-set指定：

#header {
  background-image: image-set(
    url("../../images/backgroundimage.png") 1x,
    url("../../images/backgroundimage-dark.png") 1x prefers-color-scheme(dark)
  );
}

不过这个需要你额外做一张适配图，不如filter方法省事。

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