div设置background-image后背景图片无法正常显示如何解决

你的代码有两处会导致背景图加载失败：

• CSS中.img-lightning选择器下的宽高属性未加单位，CSS规则里除了值为0的长度属性，其余长度值必须携带有效单位（如px）才会被浏览器识别。你当前写的width: 400、height: 229属于无效声明，div默认高度为0，没有承载背景图的区域自然看不到图片。
• 图片路径匹配错误：你写的背景图路径是url(images/lightning.jpg)，需要确认当前HTML文件所在的同级目录下，确实存在名为images的文件夹，且文件夹内存储的图片文件名、后缀名完全和路径写法一致（大小写敏感，比如文件实际叫Lightning.JPG，你写小写的lightning.jpg也会加载失败）。

首先修正CSS里的宽高属性，补充单位，修正后的.img-lightning代码如下：

.img-lightning {
  width: 400px;
  height: 229px;
  background-image: url(images/lightning.jpg);
  /* 可选补充：避免图片比例失调 */
  background-size: cover;
}

如果改完宽高还是不显示，按以下步骤排查：

• 按F12打开浏览器开发者工具，切换到「控制台」面板，如果路径错误会直接抛出图片资源404的报错，此时对照报错的资源路径调整你的图片存放位置或者url里的路径写法即可。
• 修改代码后按Ctrl+F5强制刷新页面，清除浏览器本地缓存，避免旧的CSS缓存导致修改不生效。
• 在开发者工具的「元素」面板选中class为img-lightning的div，查看右侧样式面板，如果宽高属性被划上删除线，说明对应CSS属性写法无效，重新检查拼写和单位即可。

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