设置为 DIV 背景的图像在 IE 中显示，但在 Firefox 中不显示。
CSS 示例：
div.something {
background:transparent url(../images/table_column.jpg) repeat scroll 0 0;
}
（这个问题在很多地方都有描述，但没有看到任何结论性的解释或修复。）
【问题讨论】：
标签： css firefox image background
你可以试试这个：
div.something {
background: transparent url(../images/table_column.jpg);
}
其他声明是简写的 CSS 属性，我 afaik 他们不需要。
你在网上有这个吗？我想看看我能不能稍微摆弄一下。 （本地）
【讨论】：
尝试将图像名称放在引号中，例如：
background-image: url('image.jpg');
【讨论】：
恐怕问题多于答案，但它们可能会帮助您找到正确的答案：
您是否有可能在 Firefox 中以某种方式折叠 div（带有一些浮动或类似的）？
div 中是否还有其他内容以确保其足够大以显示图像？
您是否安装了Firebug 并查看了页面上的 CSS 定义？
【讨论】：
您确定图片是 JPG 文件而不是 PNG/其他文件吗？
我想知道 IE 是否让你摆脱了其他浏览器没有的东西。
同样，文件大小写是否与指定的完全一致？
【讨论】：
这个 HTML 'base' 标签就像在
<head>
<base href="http://example.com/some/bizarre/directory"/>
</head>
如果这存在于您的页面中，则该 url 的图像与您当前的 url 无关，而是与给定的基本 url 相关。不过，我不知道为什么 IE 会显示它而 Firefox 不会。
Webdeveloper Firefox 扩展提供了“显示损坏的图像”选项 - 这可能会派上用场。此外，您可以尝试“Live Http Headers”来查看是否/请求了什么图像以及返回代码是什么。
【讨论】：
确保您引用的图像是相对于 css 文件而不是 html 文件的。
【讨论】：
试试这个。
background-color: transparent;
background-image: url("/path/to/image/file.jpg");
background-repeat: repeat;
background-position: top;
background-attachment: scroll;
【讨论】：
抱歉，这有点大，但它涵盖了我一直发生的两种可能性。
您可能会发现 CSS 文件的路径不正确。例如：
假设我有以下文件结构：
public/
css/
global.css
images/
background.jpg
something/
index.html
index.html
在public/index.html 上，以下路径将包含 CSS 文件：
#1: <link href="./css/global.css"
#2: <link href="/css/global.css"
#3: <link href="css/global.css"
但是在public/something/index.html 上，数字 1 和 3 将失败。如果您使用的是这样的目录结构（或 MVC 结构，例如：http://localhost/controller/action/params），请使用第二种 href 类型。
Firebug 的网络监视器选项卡会告诉您是否无法包含 CSS 文件。
关于路径的主题，请记住图像是相对于 CSS 文件的路径的。所以：
url('./images/background.jpg') /* won't work */
url('../images/background.jpg') /* works: ../ == up one level */
将鼠标悬停在 Firebug 的 CSS 选项卡中 background 属性的 url() 部分以检查文件是否正在加载。
div 可能没有内容，因此高度为 0。确保 div 至少有一行内容（例如：lorem ipsum delors secorum）或：
div.something {
display: block; /* for verification */
min-height: 50px;
min-width: 50px;
}
检查 Firebug 的布局选项卡（HTML 选项卡）以检查 div 的高度/宽度。
【讨论】：
关于 FF 中的 CSS background-image 属性，我遇到了类似的问题。它在 IE 中运行良好，但拒绝在 FF 中运行；）在阅读了几篇帖子后，我确定问题确实是 div 中除了表格之外没有任何内容（我试图使背景图像调整为大小没有折叠或扩展的浏览器，因此在 div 的背景中使用了更大的图像以形成各种“裁剪”。）对我来说，解决方案似乎是通过放置一个 img 标签来简单地“作弊”显示了一个空白 .png 文件，然后我将其重新调整为图像的正确高度，宽度设置为 100%。这对我的问题有用，我希望它可以帮助遇到类似问题的其他人。可能不是最好的修复，但它是一个修复;)
【讨论】：
除了已经说过的话，我唯一能想到的其他事情就是图片的创作方式。如果您在 Photoshop 中制作/编辑了图像，请确保将图像另存为另存为 Web...
有时，如果您在 Photoshop 中使用 JPG 图像而不另存为 Web 图像，它可能不会出现在 Firefox 中。几周前我遇到过这种情况，一位图形艺术家为一个迷你网站创建了一个漂亮的标题，但它不会出现在 FF 中！
等等……
尝试在 div 上设置宽度和高度以扩展它。这可能是您的 div 中的无内容问题。
【讨论】：
奇怪的是，在我的头在键盘上砸了几个小时之后，我添加了 display:table;以DIV的风格和背景图像神奇地出现在FF中。
【讨论】：
不使用相对于页面/样式表的 URL，跨浏览器的解决方案是提供以应用程序/域根开头的相对 URL。
/* Relative to Stylesheet (Works in Firefox) */
background: url('../images/logo.gif');
/* Relative to Page (Works in IE, Chrome etc.) */
background: url('images/logo.gif');
/* Absolute path (Fine, unless you change domains)*/
background: url('http://www.webby.com/myproduct/images/factsheet.gif');
/* Domain Root-relative path (Works in Firefox, IE, Chrome and Opera) */
background: url('/myproduct/images/factsheet.gif');
仅供参考：就我而言，没有要求在 CSS URL 中使用引号，我在这里使用它们是因为它看起来更漂亮。
【讨论】：
发生在我身上。 jpg 确实在 IE 中显示，但在 Firefox 或 Chrome 中不显示。这是解决方案
为显示图像的元素更改以下 css。它可以是 span、div 或任何其他元素：
显示：块
【讨论】：
对于那些在 FF 中遇到问题，但在 Chrome 中没有遇到问题的人：
您可能会错误地将职位的不同值类型混合在一起。
例如，
background: transparent url("/my/image.png") right 60% no-repeat;
会犯这个错误。解决方法可能是：
background: transparent url("/my/image.png") 100% 60% no-repeat;
【讨论】：
这对我有用：
1) 点击背景图片表格。
2) 右键单击页面底部的状态栏。
3) 单击内联样式。
4) 单击背景样式选项卡。
5) 如果您在颜色标题中看到“透明”，那就是问题所在。
6）点击颜色框，选择一种颜色（白色是不错的选择。）
7) 颜色标题现在应为白色。
8) 单击确定。
9) 保存页面。
10) 上传页面并覆盖现有文件。
11) 刷新页面，就会显示你的背景图片。
注意：请确保您已上传背景图片 jpeg。我忘记上传背景 jpeg 一次，花了很长时间尝试对其进行排序，然后才意识到我的错误。
问候
马丁
【讨论】：
我通过重命名 CSS 类解决了类似的问题。 MSIE 允许 CSS 类 ID 以数字开头；火狐没有。我使用图像的宽度（以像素为单位）创建了一个类，例如.1594px-01a
我实际上知道这是非标准语法，但因为它在 MSIE 中运行良好，所以我忘记了它。在尝试了所有其他的东西之后，我终于意识到它可以像命名一样简单，只要我在全班面前放一个字母，presto！
【讨论】：
我发现了导致此问题的两件事：
overflow:auto; - display:block; 对我不起作用。【讨论】：
我的错误是使用“\”而不是“/”。在 IE 中运行正常，但在其他浏览器中运行良好。
【讨论】：
看起来像是后台附件问题。它需要设置为固定（不是滚动）才能在 FF 中工作。 见：http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position
【讨论】：
对我来说，这是文件名区分大小写的问题。我不确定它是 CSS 还是我的 Ubuntu 操作系统，或者是 firefox，但我最终获得显示背景图像的方式是参考 BlueGrad.jpg 而不是 bluegrad.jpg。两者中的前者是如何保存的。我不认为它会区分大小写，但确实如此。
【讨论】：
它可能看起来很奇怪，但这对我有用>
#hwrap {
background-color: #d5b75a;
background: url("..//design/bg_header_daddy.png"), url("..//design/nasty_fabric.png");
background-position: 50% 50%, top left;
background-origin: border-box, border-box;
background-repeat: no-repeat, repeat;
}
是的，双点和双斜线...... ??!!?? ...我在互联网上找不到任何报告这种奇怪行为的东西。
[编辑] 我发了一个单独的帖子 > https://stackoverflow.com/q/18342019/529802
【讨论】：
（看起来这些不是 OP 的确切情况，但问题有些相关，我找到了我想分享的解决方法）
我也遇到过同样的问题——除了 Firefox 之外的任何地方都可以看到背景图像——对我来说，这个问题与我正在开发浏览器插件这一事实有关。
我在pageMod 模块中注入了一个文件style.css，其属性为contentStyleFile。在其中，有一个规则 background-image: url(/img/editlist.png); 我将图像文件 external 引用到附加组件。这里的问题是，与其他浏览器不同，Firefox 将这个外部域根错误地解释为附加组件的内部根！
css 文件是 Chrome 版本的扩展/附加组件的 1:1 端口，所以我不想乱用它。这就是为什么我在资源文件夹中添加了一个额外的contentStyle 规则以及该图像的副本。此规则只是覆盖 css 文件中的规则。
（事后看来可能是比以前更优雅的方法……）
【讨论】：
旧帖子，但我只是有一个类似的问题图像没有显示在 Firefox 中原来是广告屏蔽插件，不得不更改我的图像名称
【讨论】：
没有人提到背景来源，所以你去吧：
background-image:url('dead.beef');
background-size: 100% 100%;
background-origin:border-box;
为我解决了问题；我的背景显然在我的 div 之外。
【讨论】：
我也遇到过类似的问题。原因是 Firefox 对 CSS 中缺少的字段很敏感。 Chrome 会（有时）自动完成缺失的字段，因此问题会出现在您的 Firefox 浏览器上。
您需要添加一个显示类型，因为现在它正在被转换为 0 高度。
就我而言：
.left-bg-image {
display: block; // add this line
background-image: url('../images/profile.jpeg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
opacity: .6;
min-width: 100%;
min-height: 100vh;
}
【讨论】：