背景图像在 Firefox 中不显示

Posted 2023-03-06

技术标签:

【中文标题】背景图像在 Firefox 中不显示【英文标题】：Background image is not displayed in Firefox 【发布时间】：2010-09-27 03:30:27 【问题描述】：

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

CSS 示例：

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

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

【问题讨论】：

在 FF3、Opera、IE 和 Chrome 中为我工作。我通常把网址放在引号里。您有指向描述问题的地方之一的链接吗？是图片文件相对于CSS文件的路径吗？为什么没有接受的答案？？ 【参考方案1】：

你可以试试这个：

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

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

【讨论】：

我尝试自己复制它，但到目前为止失败了...... html是由第三方软件生成的，因此很难调试。我怀疑这个问题与服务器上的目录结构有关。【参考方案2】：

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

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

【讨论】：

我从不这样做 D: ，我应该吗？我 100% 确定我不应该在 CSS 中这样做。 (x)HTML，好的，但是 CSS？现在真的很困惑。【参考方案3】：

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

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

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

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

【讨论】：

我有 Firebug 并查看了 CSS 定义。我也尝试在本地重现该问题，但没有成功。除非缺少一些引号（它们在那里）或一些奇怪的 css 选项，否则我认为这与服务器上的目录结构有关。【参考方案4】：

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

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

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

【讨论】：

【参考方案5】：

这个 HTML 'base' 标签就像在

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

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

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

【讨论】：

【参考方案6】：

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

【讨论】：

【参考方案7】：

试试这个。

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

【讨论】：

他的速记方法很好（只要复制粘贴）。【参考方案8】：

抱歉，这有点大，但它涵盖了我一直发生的两种可能性。

可能性 1

您可能会发现 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() 部分以检查文件是否正在加载。

可能性2

div 可能没有内容，因此高度为 0。确保 div 至少有一行内容（例如：lorem ipsum delors secorum）或：

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

检查 Firebug 的布局选项卡（HTML 选项卡）以检查 div 的高度/宽度。

【讨论】：

【参考方案9】：

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

【讨论】：

【参考方案10】：

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

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

等等……

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

【讨论】：

【参考方案11】：

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

【讨论】：

【参考方案12】：

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

【讨论】：

【参考方案13】：

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

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

显示：块

【讨论】：

2018 年为我工作。但是我使用的是图像元素而不是 div。【参考方案14】：

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

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

例如，

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

会犯这个错误。解决方法可能是：

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

【讨论】：

【参考方案15】：

这对我有用：

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

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

问候

马丁

【讨论】：

【参考方案16】：

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

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

【讨论】：

【参考方案17】：

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

overflow:auto;

display:block;

【讨论】：

【参考方案18】：

我的错误是使用“\”而不是“/”。在 IE 中运行正常，但在其他浏览器中运行良好。

【讨论】：

【参考方案19】：

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

【讨论】：

【参考方案20】：

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

【讨论】：

【参考方案21】：

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

#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://***.com/q/18342019/529802

【讨论】：

【参考方案22】：

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

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

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

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

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

【讨论】：

【参考方案23】：

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

【讨论】：

【参考方案24】：

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

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

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

【讨论】：

【参考方案25】：

我也遇到过类似的问题。原因是 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;

【讨论】：

【参考方案26】：

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

【讨论】：

以上是关于背景图像在 Firefox 中不显示的主要内容，如果未能解决你的问题，请参考以下文章

Jquery Animate 背景图像在悬停时摇摆在 Firefox 中不起作用

如何在 Firefox 中不尊重纵横比的情况下缩放 SVG 背景图像？

在 Firefox 中不显示边框，表格上的边框折叠，位置：tbody 上的相对或单元格上的背景颜色

Firefox 的背景图像的 CSS3 过渡不起作用

为啥内联“背景图像”样式在 Chrome 10 和 Internet Explorer 8 中不起作用？

背景图像颜色更改 firefox/chrome