引用外部CSS文件时设置的background-color背景色无法生效如何解决

问题原因 #

你设置背景色的.header容器是空块级元素，未配置宽高属性，也没有内部内容撑开元素高度，元素实际渲染高度为0，因此背景色无法正常显示。

解决方案 #

• 方案1：给.header设置明确的宽高属性，CSS修改参考：

.header {
  background-color: #111111;
  width: 100%;
  height: 80px; /* 可按需调整高度数值 */
}

• 方案2：给.header容器添加内部内容，靠内容撑开容器高度，HTML修改参考：

<div class="header">
  头部导航内容
</div>

其他排查项 #

如果调整后还是无法显示，可以依次排查以下问题：

• 确认CSS文件路径配置正确：如果designs.css和HTML文件不在同一级目录，需要修改link标签的href属性为实际文件路径
• 按F12打开浏览器开发者工具，切换到网络面板刷新页面，确认designs.css没有报404加载错误
• 切换到元素面板选中.header容器，检查是否有其他更高优先级的CSS规则覆盖了background-color属性

内容的提问来源于stack exchange，提问作者ms. baudelaire