使用Brackets编辑器开发项目时CSS设置的背景图片无法显示如何解决

问题核心原因 #

你CSS中定义的是类选择器.header，但HTML里使用的是原生<header>标签，没有给标签添加class="header"属性，因此CSS规则完全没有匹配到对应元素，背景图自然不会生效。

解决方案（二选一即可） #

• 方案1：修改CSS选择器，把.header改成标签选择器header，适配现有HTML结构

  /* 修改前 */
  .header {
    background-image: url(../img/hero.jpg);
    background-size: cover;
    height: 100vh;
  }
  /* 修改后 */
  header {
    background-image: url(../img/hero.jpg);
    background-size: cover;
    height: 100vh;
  }
  

• 方案2：修改HTML结构，给<header>标签添加对应类名，适配现有CSS规则

  <!-- 修改前 -->
  <header>
  <!-- 修改后 -->
  <header class="header">
  

其他可排查的潜在问题 #

如果修改后仍无法正常显示，可按以下步骤排查：

• 按F12打开浏览器开发者工具，切换到「网络」面板，刷新页面后查看hero.jpg的请求状态，如果返回404说明运行时路径仍有问题，可尝试调整为相对于项目根目录的绝对路径
• 直接在本地资源管理器打开对应图片，确认图片文件本身没有损坏
• 在开发者工具的「元素」面板选中<header>标签，查看右侧样式列表中background-image属性是否被划掉，如果是说明存在更高优先级的CSS规则覆盖了当前设置

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