css - Firefox 中不显示背景图像

Question

设置为 DIV 背景的图像在 IE 中显示，但在 Firefox 中不显示。

CSS 示例：

div.something {
background:transparent url(../images/table_column.jpg) repeat scroll 0 0;
}

（这个问题在很多地方都有描述，但没有看到任何结论性的解释或修复。）

score 16 · Accepted Answer

Sorry this got huge, but it covers two possibilities that consistently happen to me.

Possibility 1

You may find the path to the CSS file isn't correct. For example:

Say I have the following file structure:

public/
    css/
        global.css
    images/
        background.jpg
    something/
        index.html
    index.html

On public/index.html the following paths will include the CSS file:

#1:  <link href="./css/global.css"
#2:  <link href="/css/global.css"
#3:  <link href="css/global.css"

However on public/something/index.html number 1 and 3 will fail. If you are using a directory structure like this (or an MVC structure e.g.: http://localhost/controller/action/params) use the second href type.

Firebug's Net monitor tab will tell you if the CSS file can't be included.

On the subject of paths remember that images are relative to the path of the CSS file. So:

url('./images/background.jpg') /* won't work */
url('../images/background.jpg') /* works: ../ == up one level */

Hover over the url() part of the background attribute in Firebug's CSS tab to check if the file's being loaded.

Possibility 2

It could be that the div has no content and thus has a 0 height. Make sure the div has at least a line of something in (e.g.: lorem ipsum delors secorum) or:

div.something {
    display: block; /* for verification */
    min-height: 50px;
    min-width: 50px;
}

Check Firebug's layout tab (of the HTML tab) to check the div has a height/width.

score 7 · Accepted Answer

奇怪的是，在键盘上砸了几个小时后，我添加了 display:table; 以DIV的风格和背景图像神奇地出现在FF中。

score 5 · Accepted Answer

它看起来像一个背景附件问题。它需要设置为固定（不是滚动）才能在 FF 中工作。见：http ://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position

score 3 · Accepted Answer

发生在我身上。jpg 确实在 IE 中显示，但在 Firefox 或 Chrome 中不显示。这是解决方案

为显示图像的元素更改以下 css。它可以是 span、div 或任何其他元素：

显示：块

score 3 · Accepted Answer

旧帖子，但我只是有一个类似的问题图像没有出现在 Firefox 中原来是广告拦截插件，不得不更改我的图像的名称

score 1 · Accepted Answer

1

尝试将图像名称放在引号中，例如：

background-image: url('image.jpg');

于 2008-12-16T13:58:30.040 回答

score 1 · Accepted Answer

1

确保您所指的图像是相对于 css 文件而不是 html 文件的。

于 2008-12-26T23:20:10.303 回答

score 1 · Accepted Answer

尝试这个。

background-color: transparent;
background-image: url("/path/to/image/file.jpg");
background-repeat: repeat;
background-position: top;
background-attachment: scroll;

score 1 · Accepted Answer

对我来说，这是文件名区分大小写的问题。我不确定它是 CSS 还是我的 Ubuntu 操作系统，或者是 firefox，但我最终获得显示背景图像的方式是参考 BlueGrad.jpg 而不是 bluegrad.jpg。两者中的前者是如何保存的。我不认为它会区分大小写，但确实如此。

score 1 · Accepted Answer

跨浏览器的解决方案不是使用相对于页面/样式表的 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 中使用引号，我在这里使用它们，因为它看起来更漂亮。

score 1 · Accepted Answer

我通过重命名 CSS 类解决了类似的问题。MSIE 允许 CSS 类 ID 以数字开头；火狐没有。我使用图像的宽度（以像素为单位）创建了一个类，例如 .1594px-01a

我实际上知道这是非标准语法，但由于它在 MSIE 中运行良好，所以我忘记了它。在尝试了所有其他东西之后，我终于意识到它可以像命名一样简单，而且我一在全班面前放了一封信，presto！

score 1 · Accepted Answer

我有一个类似的问题。原因是 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;
}

score 0 · Accepted Answer

关于 FF 中的 CSS background-image 属性，我遇到了类似的问题。它在 IE 中运行良好，但拒绝在 FF 中运行；）在阅读了一些帖子后，我确定问题确实是 div 中除了表格之外没有任何内容（我试图使背景图像调整为大小没有折叠或扩展的浏览器，因此在 div 的背景中使用了更大的图像以形成各种“裁剪”。）对我来说，解决方案似乎是通过放置一个 img 标签来简单地“作弊”显示了一个空白 .png 文件，然后我将其重新调整为图像的正确高度，宽度设置为 100%。这对我的问题很有用，我希望它可以帮助遇到类似问题的其他人。可能不是最好的修复，但它是一个修复；）

score 0 · Accepted Answer

您确定图像是 JPG 文件而不是 PNG/其他文件吗？

我想知道 IE 是否让你摆脱了其他浏览器没有的东西。

同样，文件大小写是否与指定的完全一致？

score 0 · Accepted Answer

有这个 HTML 'base' 标签，就像

<head>
   <base href="http://example.com/some/bizarre/directory"/>
</head>

如果这存在于您的页面中，则该 url 的图像与您当前的 url 无关，而是与给定的基本 url 相关。不过，我不知道为什么 IE 会显示它而 Firefox 不会。

Webdeveloper Firefox 扩展提供了“显示损坏的图像”选项 - 这可能会派上用场。此外，您可以尝试“ Live Http Headers ”来查看是否/请求了什么图像以及返回代码是什么。

score 0 · Accepted Answer

你可以试试这个：

div.something {
background: transparent url(../images/table_column.jpg);
}

其他声明是简写的 CSS 属性，我 afaik 不需要它们。
你在网上有这个吗？我想看看我能不能稍微摆弄一下。（本地）

score 0 · Accepted Answer

恐怕问题多于答案，但它们可能会帮助您找到正确的答案：

您是否有可能以某种方式折叠 Firefox 中的 div（带有一些浮点数或类似的）？

div 中是否还有其他内容以确保其足够大以显示图像？

您是否安装了Firebug并查看了页面上的 CSS 定义？

score 0 · Accepted Answer

我发现了导致此问题的两件事：

我使用的是 .tif 文件，Firefox 似乎不喜欢它——我改成了 .png 文件。
我overflow:auto;为 div 添加了 CSS -display:block;对我不起作用。

score 0 · Accepted Answer

除了已经说过的话，我唯一能想到的另一件事就是图片的创作方式。如果您在 Photoshop 中制作/编辑了图像，请确保将图像另存为另存为 Web...

有时，如果您在 Photoshop 中使用 JPG 图像而不另存为 Web 图像，它可能不会出现在 Firefox 中。几周前我发生过这种情况，一位图形艺术家为一个迷你网站创建了一个漂亮的标题，它不会出现在 FF 中！

等待...

尝试在 div 上设置宽度和高度以扩展它。这可能是您的 div 中的无内容问题。

score 0 · Accepted Answer

它可能看起来很奇怪，但这对我有用>

#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

score 0 · Accepted Answer

我的错误是使用“\”而不是“/”。在 IE 中可以正常工作，但在其他浏览器中不行。

score 0 · Accepted Answer

对于那些在 FF 中遇到问题但在 Chrome 中没有遇到问题的人：

您可能会错误地将职位的不同值类型混合在一起。

例如，

background: transparent url("/my/image.png") right 60%  no-repeat;

会犯这个错误。修复可能是：

background: transparent url("/my/image.png") 100% 60%  no-repeat;

score 0 · Accepted Answer

（这似乎不是 OP 的确切情况，但问题有点相关，我找到了我想分享的解决方法）

我也遇到过同样的问题——除了在 Firefox 中，到处都可以看到背景图像——对我来说，这个问题与我正在开发浏览器插件这一事实有关。

我正在使用该属性style.css在pageMod模块中注入一个文件。contentStyleFile在其中，有一个规则background-image: url(/img/editlist.png);是我引用附加组件外部的图像文件。这里的问题是，与其他浏览器不同，Firefox 将这个外部域根错误地解释为附加组件的内部根！

css 文件是 Chrome 版本的扩展/附加组件的 1:1 端口，所以我不想弄乱它。这就是为什么我contentStyle在资源文件夹中添加了一个附加规则以及该图像的副本。此规则只是覆盖 css 文件中的规则。

（事后看来，甚至可能是比以前更优雅的方法……）

score 0 · Accepted Answer

在我的情况下，它是由 FF 隐私和安全设置中的“严格”模式引起的。在我更改为“标准”后，所有背景图像都变得可见。

score 0 · Accepted Answer

没有人提到背景来源，所以你去：

background-image:url('dead.beef');
background-size: 100% 100%;
background-origin:border-box;

为我解决了问题；我的背景显然在我的 div 之外。

score -1 · Accepted Answer

这对我有用：

1) 单击背景图像表。
2) 右键单击页面底部的状态栏。
3) 单击内联样式。
4) 单击背景样式选项卡。
5) 如果您在颜色标题中看到“透明”，那就是问题所在。
6) 单击颜色框并选择一种颜色（白色是一个不错的选择。）
7) 颜色标题现在应该显示为白色。
8) 单击确定。
9) 保存页面。
10) 上传页面并覆盖现有文件。
11) 刷新页面，你的背景图片就会显示出来。

注意：请确保您已上传背景图片 jpeg。我忘记上传背景 jpeg 一次，并且在我意识到我的错误之前花了很长时间尝试对其进行排序。

问候

马丁

css - Firefox 中不显示背景图像

26 回答 26

Possibility 1

Possibility 2

Related

Reference