Div覆盖层对话框及背景图在Firefox浏览器无法正常显示问题求助

问题根因 #

你为<img>元素设置content: url()加载图片的写法不属于标准用法，Chromium内核的Chrome、Edge做了非标准兼容支持，但Firefox没有对该用法做兼容，这就是你路径检查正常但图片无法在Firefox中展示的核心原因。
之前的div高度塌陷也是因为该问题：Firefox识别不到img元素的内容，所以img高度为0，父容器自然跟着塌陷，你手动加height属于临时修复方案，没有解决图片加载的本质问题。

修复方案（任选其一即可） #

方案1：使用img标签原生的src属性加载图片（最推荐，符合HTML规范） #

删掉CSS中.dialogbg的content: url("/Images/Video%20Page/dialog.jpg");规则，直接在HTML的img标签上添加src属性：

<img className="dialogbg" src="/Images/Video%20Page/dialog.jpg"/>

修改后img会正常加载图片，父容器也会自动被图片高度撑开，不需要额外写固定height。

方案2：改用background-image加载背景图 #

如果需要用CSS控制图片资源，把img标签替换为普通div：

<div className="dialogbg"></div>

修改对应CSS规则：

.dialogbg {
  position: relative;
  width: 500px;
  height: 300px; /* 替换为你对话框实际需要的高度 */
  background-image: url("/Images/Video%20Page/dialog.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

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