如何用CSS按钮切换主题并实现深色模式下背景图片变暗

方案1：用CSS滤镜配合主题类 #

这是最简便的实现方式，通过给页面元素切换主题类，搭配filter属性调整背景图片的亮度与对比度：

/* 基础背景样式 */
body {
  background-image: url('你的背景图片路径');
  background-size: cover;
  background-position: center;
  transition: filter 0.3s ease; /* 添加过渡动画让切换更平滑 */
}

/* 深色主题下的滤镜效果 */
body.dark {
  filter: brightness(0.6) contrast(1.1); /* 数值可按需调整，brightness越小图片越暗 */
}

如果不想让页面其他元素被滤镜影响，建议单独给背景图片创建全屏容器：

<div class="bg-container"></div>
<!-- 页面其他内容放在容器外部 -->

.bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('你的背景图片路径');
  background-size: cover;
  background-position: center;
  z-index: -1;
  transition: filter 0.3s ease;
}

.bg-container.dark {
  filter: brightness(0.6) contrast(1.1);
}

对应的JS切换逻辑：

const toggleBtn = document.getElementById('theme-toggle');
const bgContainer = document.querySelector('.bg-container');

toggleBtn.addEventListener('click', () => {
  bgContainer.classList.toggle('dark');
  // 可选：将主题偏好持久化到本地存储
  localStorage.setItem('theme', bgContainer.classList.contains('dark') ? 'dark' : 'light');
});

// 页面加载时恢复上次选择的主题
window.addEventListener('load', () => {
  if (localStorage.getItem('theme') === 'dark') {
    bgContainer.classList.add('dark');
  }
});

方案2：叠加半透明遮罩层 #

在背景图片上方添加一个深色半透明层，深色主题时显示该层，浅色主题时隐藏：

<div class="bg-container">
  <div class="dark-overlay"></div>
</div>

.bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('你的背景图片路径');
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.dark-overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 黑色半透明，透明度可按需调整 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bg-container.dark .dark-overlay {
  opacity: 1;
}

JS逻辑和方案1一致，切换时给.bg-container添加/移除dark类即可。

方案3：使用预处理的深色背景图 #

如果对图片效果要求极高，不想用滤镜或遮罩产生色差，可以提前准备一张处理好的深色版背景图，切换主题时直接替换图片路径：

.bg-container.light {
  background-image: url('light-bg.jpg');
}

.bg-container.dark {
  background-image: url('dark-bg.jpg');
}

这种方法的优势是图片效果完全可控，缺点是需要额外维护一张图片资源。

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