为何#home元素背景图片无法显示？附HTML与CSS代码

让我帮你排查下#home背景图不显示的常见原因，这些都是日常开发中很容易踩的坑：

• 路径错误（最常见）
  你写的url(images/bg.png)是相对路径，它的参照是当前HTML文件的位置：

  • 如果HTML文件在根目录，images文件夹也在根目录下，这个路径是正确的；
  • 如果HTML文件在子文件夹（比如pages/index.html），那路径需要改成../images/bg.png才能定位到上级目录的images文件夹；
  • 另外要注意文件名大小写，Linux或服务器环境下bg.png和Bg.png会被识别为不同文件，一定要严格匹配。
    你可以直接在浏览器地址栏输入图片的完整访问路径（比如http://你的域名/images/bg.png），如果打不开，说明路径或者文件本身存在问题。

• 父元素高度未设置导致#home高度为0
  你给#home设置了height: 100%;，但这个百分比是相对于父元素（<body>和<html>）的高度计算的。默认情况下，<html>和<body>的高度是由内容撑开的，如果页面里只有#home这部分内容，且没有给html/body设置高度，那#home的height:100%就没有参照基准，元素实际高度会变成0，背景图自然无法显示。
  解决方法是给html和body添加高度样式：

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  

• 图片文件本身异常
  检查下bg.png是否真的存在于images文件夹中，有没有被误删、文件名拼写错误，或者图片本身损坏（比如下载过程中出错）。你可以直接双击打开图片文件，确认它能正常显示。

• CSS样式被其他规则覆盖
  打开浏览器的开发者工具（按F12），定位到#home元素，查看Styles面板里的background属性是否被划掉。如果是，说明有其他优先级更高的CSS规则（比如更具体的选择器、内联样式）覆盖了你的设置。这时候你可以调整选择器的优先级，或者用!important临时测试（不推荐长期使用，建议优化选择器结构）。

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