HTML 中 <footer> 标签设置 background-color 后颜色未生效，通常是因为元素高度为 0（无内容或未清除浮动），导致背景不可见；添加内容、设置高度或使用 min-height 即可修复。

html 中 `

` 标签设置 `background-color` 后颜色未生效，通常是因为元素高度为 0（无内容或未清除浮动），导致背景不可见；添加内容、设置高度或使用 `min-height` 即可修复。

在 HTML 中，<footer> 是一个块级元素，但它的默认高度由其内部内容决定。如果你仅写：

<footer style="background-color: hsl(0, 18%, 81%)"></footer>

该 <footer> 标签内为空，浏览器渲染时其计算高度为 0px，因此即使设置了 background-color，也“无处可显”——背景区域不存在。

✅ 正确做法是确保 <footer> 拥有可渲染的高度，常见方式包括：

• 添加可见内容（最直接）：

  

  html-to-pptx-converter

  使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

  下载

  立即学习“前端免费学习笔记（深入）”；

  <footer style="background-color: hsl(0, 18%, 81%)">
    <p>&copy; 2024 My Website</p>
  </footer>

• 显式设置高度或最小高度（适用于占位或空白页脚）：

  <footer style="background-color: hsl(0, 18%, 81%); min-height: 60px; padding: 1rem;"></footer>

⚠️ 注意事项：

• HSL 写法中逗号为必需分隔符：hsl(0, 18%, 81%) ✅，而 hsl(0 18% 81%) ❌（部分旧版浏览器可能不支持无逗号语法，现代 Chrome/Firefox 虽兼容但建议统一用标准格式）；
• 若 <footer> 外部存在浮动元素或 CSS 重置影响（如 margin-collapse），也可能导致高度塌陷，此时可配合 overflow: hidden 或 clear: both 使用；
• 推荐将样式移至外部 CSS 文件或 <style> 块中，便于维护：

  footer {
    background-color: hsl(0, 18%, 81%);
    padding: 1rem;
    min-height: 60px;
  }

总结：背景色“消失”本质是元素不可见，而非样式失效。排查时优先检查元素是否具有有效尺寸——这是前端布局中最常见的“隐形陷阱”之一。