CSS背景色设置不生效、网页交互与主题切换功能实现求助

一、CSS背景色不生效问题修复 #

按以下优先级排查即可解决：

• 检查样式优先级冲突：打开浏览器开发者工具选中要设置背景的元素，在「样式」面板查看最终生效的背景规则，大概率是存在更高优先级的样式（比如带!important的规则、固定定位满屏的遮罩层/容器层背景）覆盖了你写的属性，删掉冲突的冗余规则即可。
• 补全基础样式重置：很多时候背景不显示是因为根元素高度塌缩，先在CSS最开头加全局重置规则：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  min-height: 100vh;
  width: 100%;
}

• 检查语法与引入路径：确认CSS文件通过<link>标签正确引入，background-color属性名拼写正确，使用的色值格式合法，不存在多写字符、漏写符号的问题。

二、埃及神明介绍点击展示功能实现 #

用原生JS即可实现，无需额外依赖：

1. 先搭建HTML结构，每个神明对应一个卡片单元，按钮通过data-target属性绑定对应介绍元素的ID：

<div class="gods-wrapper">
  <div class="god-card">
    <img src="本地太阳神拉的图片路径" alt="太阳神拉" class="god-img">
    <button class="god-name-btn" data-target="ra-desc">拉（Ra）</button>
    <p class="god-desc" id="ra-desc" hidden>古埃及最高等级的太阳神，象征生命、秩序与白昼，经典形象为鹰首人身，头顶托举太阳圆盘。</p>
  </div>
  <!-- 其余神明卡片复制上述结构，替换图片、名称、介绍内容即可 -->
</div>

2. 加点击交互逻辑：

document.querySelectorAll('.god-name-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const targetDesc = document.getElementById(btn.dataset.target)
    targetDesc.hidden = !targetDesc.hidden
  })
})

如果需要实现「点开当前介绍时自动收起其他神明介绍」的效果，只要在点击事件逻辑最开头加一行document.querySelectorAll('.god-desc').forEach(item => item.hidden = true)即可。

三、整站主题切换功能实现 #

用CSS自定义属性+类名切换的方案实现，维护成本极低，还能记忆用户的选择偏好：

1. 先在CSS中定义两套主题的色值变量，全局样式统一调用变量：

/* 默认浅色主题 */
:root {
  --bg: #f3ead8;
  --text: #2b1f10;
  --card-bg: #fffaf0;
  --btn-bg: #d4af37;
}
/* 暗色沙漠主题 */
html[data-theme="dark"] {
  --bg: #1a130a;
  --text: #e4d3b1;
  --card-bg: #3a2a1c;
  --btn-bg: #b8860b;
}
body {
  background: var(--bg);
  color: var(--text);
  transition: 0.3s ease all; /* 切换时加平滑过渡 */
}
.god-card {
  background: var(--card-bg);
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem;
}
.god-name-btn, #theme-toggle {
  background: var(--btn-bg);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 0.8rem;
}

2. 加入主题切换按钮与交互逻辑：

<button id="theme-toggle">切换主题</button>

const themeBtn = document.getElementById('theme-toggle')
// 优先读取用户之前保存的主题偏好
const savedTheme = localStorage.getItem('site-theme') || 'light'
document.documentElement.setAttribute('data-theme', savedTheme)

themeBtn.addEventListener('click', () => {
  const current = document.documentElement.getAttribute('data-theme')
  const newTheme = current === 'light' ? 'dark' : 'light'
  document.documentElement.setAttribute('data-theme', newTheme)
  localStorage.setItem('site-theme', newTheme)
})

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