的背景图在IE中正常显示，但在Firefox中却无法显示。
CSS示例：
div.something {
background:transparent url(../images/table_column.jpg) repeat scroll 0 0;
}
（这个问题在很多地方都有描述，但没有看到任何确定的解释或修复方法。）
背景图片在Firefox中未显示
20
- user46665
4
1在我的电脑上，这个程序可以在FF3、Opera、IE和Chrome上运行。我通常会将URL放在引号中。 - some
你有一个描述这个问题的链接吗？ - some
1图片文件路径是否相对于CSS文件？ - Andy
为什么没有被接受的回答？ - TetraDev
26个回答
16
抱歉这段文字有点长，但它涵盖了我经常遇到的两种情况。
情况一
你可能会发现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的Net监视器选项卡会告诉您CSS文件是否无法包含。
关于路径的问题，请记住图像是相对于CSS文件的路径。因此：
url('./images/background.jpg') /* won't work */
url('../images/background.jpg') /* works: ../ == up one level */
在Firebug的CSS选项卡中将光标悬停在background属性的url()部分上，以检查文件是否已加载。
可能性2
可能是
没有内容，因此高度为0。确保
至少有一行内容（例如：lorem ipsum delors secorum）或：
div.something {
display: block; /* for verification */
min-height: 50px;
min-width: 50px;
}
请查看 Firebug 的布局选项卡（HTML 选项卡）以检查 div 元素是否具有高度/宽度。
- Ross
7
有趣的是，经过几个小时的敲击键盘，我在DIV的样式中添加了display:table;后，在Firefox浏览器中神奇地出现了背景图像。
- Eric
5
看起来是一个背景附加问题。在FF中，它需要设置为fixed（而不是scroll）才能正常工作。
参见：http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position
- a avant
3
虽然这篇文章比较旧，但我最近遇到了类似的问题——在Firefox浏览器中无法显示图片。后来发现是Ad-block插件导致的，只需更改图片的名称即可解决问题。
- ramon22
3
我曾经遇到过这样的问题，即在IE中显示jpg图片，在Firefox或Chrome中却没有显示。以下是解决方法：
更改显示图像的元素的CSS，它可以是span、div或任何其他元素：
"display:block"
更改显示图像的元素的CSS，它可以是span、div或任何其他元素：
"display:block"
- Hammad
1
2018年对我有用。但是我使用的是图像元素而不是div。 - Brian Peterson
2
尝试将图片名称放在引号中，例如：
background-image: url('image.jpg');
- Toytown Mafia
2
我从来没有这样做过D:，我应该这样做吗？ - Kablam
我百分之百确定在CSS中不应该这样做。 (x)HTML可以，但是CSS？现在真的很困惑。 - Kablam
2
我曾经遇到过类似的问题。原因是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;
}
- Haim
1
对我而言，这个问题是文件名区分大小写导致的。我不确定是CSS、Ubuntu操作系统还是Firefox的问题，但最终让背景图显示的方法是引用BlueGrad.jpg而不是bluegrad.jpg。前者是保存时的文件名。我没有想到它是区分大小写的，但事实却是如此。
- Stuart
1
请确保您所引用的图像是相对于 CSS 文件而不是 HTML 文件。
- GateKiller
1
我曾通过重命名CSS类来解决类似的问题。MSIE允许CSS类ID以数字开头；Firefox则不行。我创建了一个使用像素图像宽度的类，例如.1594px-01a
实际上，我知道这是非标准语法，但由于在MSIE中运行良好，所以我忘记了它。在尝试了所有其他方法之后，我终于意识到它可能只是命名问题，当我在类前面加上一个字母时，问题迎刃而解！
- Randall
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接