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

html 中 `

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

在 HTML 中，

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

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

该

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

✅ 正确做法是确保

拥有可渲染的高度，常见方式包括：

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

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载

  <footer style="background-color: hsl(0, 18%, 81%)"><p>© 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 虽兼容但建议统一用标准格式）；
• 若
  外部存在浮动元素或 CSS 重置影响（如 margin-collapse），也可能导致高度塌陷，此时可配合 overflow: hidden 或 clear: both 使用；
• 推荐将样式移至外部 CSS 文件或

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！