设置div高度为100vh时背景图消失，dev tools显示header背景属性为none

问题原因与排查方案 #

你遇到的背景图闪失、被自动设置为none的问题，是有更高优先级的样式动态覆盖了你写的CSS属性，按以下步骤逐一排查即可定位：

• 先注释HTML文件末尾的JS引入代码：

  <!-- <script src="app.js"></script> -->
  

  刷新页面后如果背景图恢复正常，直接检查app.js内的逻辑，大概率是你写的滚动监听、自适应判断等逻辑中，匹配到header高度为100vh的条件时，主动给.header元素添加了行内样式覆盖了背景图属性，全局搜索JS代码里的backgroundImage、.header、style相关代码就能找到问题点。
• 如果注释JS后问题还存在，打开浏览器开发者工具的元素面板，定位到.header元素，查看样式栏中background-image: none的来源：
  • 如果来源显示为「扩展程序」，就是你安装的暗色模式、广告拦截类扩展匹配到了你的元素类名/图片路径，自动隐藏了背景图，禁用对应扩展即可。
  • 如果来源是你自己的CSS文件，查找是否有媒体查询、更高优先级的选择器（比如body .header、ID选择器）在满足视口高度条件时，设置了background-image: none。
• 临时验证可以给背景图属性加!important确认覆盖问题：

  .header{
      height: 100vh;
      width: 100%;
      background-image: url("images/image-header.jpg") !important;
      background-size: cover;
  }
  

  加了之后背景图不再消失，就可以确定是其他样式覆盖导致的，按前两个步骤找覆盖源即可。

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