Firefox 附加组件 CSS 不显示背景图像

Question

我正在开发一个 Firefox 附加组件，它使用 jQuery 在渲染页面的特定位置插入 div 标签。

div 标签使用 CSS 文件设置样式，该文件使用以下代码注入：

var style = Style({
  uri: './dist/app.css'
});

在这个 CSS 文件中我有：

.myExt_injected_div_tag {
    background-color: blue !important;
    background-image: url('/locaton/of/my/image.png') !important;
}

之所以应用此 CSS，是因为背景颜色效果很好（我已尝试将其更改为不同的颜色以达到 100%）。

问题是 background-image 标签没有影响。我已经尝试了很多不同的值，从 resource://my-ext/data/img.png 到 URLs 到带有 FQDN 的图像，这在我手动输入浏览器时有效。

如何更改背景图片？

Answer 1

background-image 的 URL 必须相对于呈现此图像的 HTML/CSS 文件的位置。

ex: data\html\pane.html
    data\images\pane-img.png
    data\styles\pane.css

然后在pane.css:

background-image:url("../images/pane-img.png");

Firefox Add-On CSS not displaying background-image