HTML5/JS游戏开发：嵌套div背景图片路径正确却无法显示

你的问题核心是嵌套的目标div没有设置宽高——空元素默认没有尺寸，哪怕背景图路径正确，也没有显示的空间。

修复后的CSS代码 #

.DivClass {
  background-color: rgba(20, 20, 20, 0.75);
  background-repeat: no-repeat;
  background-size: 47%;
  background-position: center;
}

#DivId {
  background-image: url(../InventoryAssets/Key-trimmy.png);
  /* 必须添加宽高，数值根据你的游戏界面需求调整 */
  width: 200px;
  height: 200px;
}

额外优化建议 #

1. 你原本的.DivClass里重复写了background-repeat: no-repeat，可以删掉其中一个，避免代码冗余。
2. 可以用background简写属性整合所有背景相关设置，让代码更简洁：

#DivId {
  background: url(../InventoryAssets/Key-trimmy.png) center/47% no-repeat;
  width: 200px;
  height: 200px;
}

额外检查点 #

• 再次确认图片路径：在浏览器地址栏直接输入../InventoryAssets/Key-trimmy.png（需基于当前HTML文件的路径），看能否正常打开图片，排除路径实际错误的可能。
• 如果图片本身是全透明的，可能会被背景色覆盖，可临时去掉背景色测试。

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