背景 .png 在 Chrome 和 Firefox 中无法显示

Question

我可能错过了一些非常明显的东西，但是在网上找不到任何其他信息。

我正在尝试使用以下代码将 .png 图片引入页面：

background:url(img/runner1.png) no-repeat;

我知道路径是正确的，因为使用jpg格式的相同操作可以成功：

background:url(img/header.jpg) no-repeat;

这似乎在Safari中可行，但在Chrome或Firefox中不行。

我错过了什么吗？

---

编辑 - 我正在使用：

#runner1{
background:url(img/runner1.png) no-repeat;
float: left;
border: 1px solid #FFF;
width: 195px;
height: 205px;
}

以下是该元素的内容：

<div id="runner1"></div>

这个页面只是从我的桌面本地运行（没有涉及到服务器）。

如之前所述，路径不是问题，因为来自同一目录的 jpg 文件可以正常显示。

Firebug 显示：

runner1.png 
GET
Success
image/png
index.html:201  
0B  
8ms

但是我在Firebug中看不到预览或响应。

直接访问文件也返回相同的结果。

- user1076082

---

在你的Firefox浏览器上安装Firebug，看看发生了什么。 - mreq

如果您直接导航到PNG文件，会得到什么？服务器上的MIME类型设置正确吗？ - RedWolves

你没有错过任何东西。你发布的代码中没有错误，png格式被所有浏览器支持。一定是其他问题。尝试使用Chrome的DOM检查器查看用于加载png的实际HTTP请求。 - Abhi Beckert

我们没有足够的代码来给出合格的答案或建议。您在哪些元素中以及如何使用CSS？您怎么知道它不起作用？需要更多信息... - Repox

不应该有什么区别，但是尝试使用完整的背景规范：background: transparent url(img/header.png) left top no-repeat; - Ryan Kinal

不确定是否相关，但我有一个具有#000000实心像素应用程序的png，在FF9中无法显示。仅将该值移动到＃000001即可使png显示。这是我的错误报告：https://bugzilla.mozilla.org/show_bug.cgi?id=714745 - Screenack

Answer 1

问题已解决！

看起来用Photoshop保存PNG图像会生成与chrome或firefox不兼容的PNG格式。因此，我改为使用Fireworks打开文件并重新保存，这样PNG图像就可以正常工作了。

- user1076082

---

很高兴你已经解决了你的问题，但我非常确定我之前使用过从PS保存的PNG而没有遇到任何问题。你有参考资料吗？ - N3dst4

我在使用GIMP导出的PNG文件方面遇到了类似的问题。 - Keltari

Answer 2

我在使用IrfanView保存.png文件时遇到了同样的问题：在PNG保存选项中取消“保存透明颜色”选项之前，它们无法显示为背景图像。因此，我猜测PNG应该在不带透明颜色的情况下保存，才能作为背景图像显示。

- greenb

Answer 3

我的猜测是你漏写了/。尝试使用绝对路径的URL。

- Michael Krelin - hacker

---

尝试将一些内容放入 div 中？比如不间断空格？ - Michael Krelin - hacker