Firefox中不显示背景图像

时间：2008-12-16 13:44:39

标签： css firefox image background

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

CSS示例：

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

（这个问题在很多地方都有描述，但没有看到任何确凿的解释或解决方法。）

26 个答案:

答案 0 :(得分：12)

对不起，这很重要，但它涵盖了我不断遇到的两种可能性。

可能性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的Net monitor选项卡将告诉您是否无法包含CSS文件。

关于路径的主题，请记住图像是相对于CSS文件的路径。所以：

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

将鼠标悬停在Firebug的CSS标签中的背景属性的url()部分，以检查文件是否已加载。

可能性2

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

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

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

答案 1 :(得分：7)

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

答案 2 :(得分：5)

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

答案 3 :(得分：3)

和我在一起。 jpg确实在IE中显示，但在Firefox或Chrome中没有显示。这是解决方案

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

  

显示：块

答案 4 :(得分：1)

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

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

答案 5 :(得分：1)

我通过重命名CSS类解决了类似的问题。 MSIE允许CSS类ID以数字开头; Firefox没有。我用像素的宽度创建了一个类，例如.1594px-01A

我实际上知道它是非标准语法，但由于它在MSIE中运行良好，我已经忘记了它。在尝试了所有其他的东西之后，我终于明白了这可能是一个简单的命名，并且只要我在课堂前写了一封信，就预感了！

答案 6 :(得分：1)

对我来说，文件名是区分大小写的。我不确定它是CSS还是它是我的Ubuntu操作系统，或者它是firefox，但是我最终得到背景图像的方式是通过引用BlueGrad.jpg而不是bluegrad.jpg。两者的前者是如何得救的。我不认为它会区分大小写，但确实如此。

答案 7 :(得分：1)

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

答案 8 :(得分：1)

试试这个。

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

答案 9 :(得分：1)

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

答案 10 :(得分：0)

旧帖但我只是有一个类似的问题图片没有出现在Firefox中，原来是Ad-block插件，不得不更改我的图片名称

答案 11 :(得分：0)

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

我遇到了同样的问题 - 除了Firefox之外，所有地方都可以看到背景图片 - 对我而言，问题与我在浏览器插件上工作的事实有关。

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

css文件是Chrome版扩展程序/插件的1：1端口，所以我不想搞砸它。这就是为什么我在资源文件夹中添加了额外的contentStyle规则以及该图片的副本。此规则只是覆盖css文件中的规则。

（事后看来，甚至比以前更优雅的方法......）

答案 12 :(得分：0)

没有人提到 background-origin 所以你去了：

<nav id="primary-menu" class="dark">

                    <ul id="top-menu" class="nav navbar-nav navbar-right mu-main-nav">
                        <li class="current"><a href="#" data-scrollto="#slider" data-offset="100"><div>Home</div></a></li>
                        <li><a href="#" data-scrollto="#content" data-offset="100"><div>About</div></a></li>
                        <li><a href="#" data-scrollto="#section-services" data-offset="100"><div>Website</div></a></li>
                        <li><a href="#" data-scrollto="#mobile-app" data-offset="100"><div>Mobile App</div></a></li>
                        <li><a href="#" data-scrollto="#portfolio" data-offset="100"><div>Portfolio</div></a></li>
                        <li><a href="#" data-scrollto="#section-pricing" data-offset="100"><div>Pricing</div></a></li>
                        <li><a href="#" data-scrollto="#testimonials" data-offset="100"><div>Testimonials</div></a></li>
                        <li><a href="#" data-scrollto="#section-contact" data-offset="100"><div>Contact</div></a></li>
                            <!--<a href="#" data-scrollto="#content" data-offset="100" class="dark one-page-arrow"><i class="icon-angle-down infinite animated fadeInDown"></i></a>-->

                    </ul>
</nav>

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

答案 13 :(得分：0)

看起来很奇怪，但这对我有用＆gt; 

#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;
}

是的，双点和双斜线...... ?? !! ?? ...我在互联网上找不到报告这种奇怪行为的任何内容。

[编辑] 我做了一个单独的帖子＆gt; https://stackoverflow.com/q/18342019/529802

答案 14 :(得分：0)

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

答案 15 :(得分：0)

你可以试试这个：

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

其他声明是简写的CSS属性，我不需要它们 你在网上有这个吗？我想看看我是否可以摆弄它。 （局部地）

答案 16 :(得分：0)

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

enter image description here

答案 17 :(得分：0)

我的错误是使用'\'而不是'/'。在IE中工作正常，但在其他浏览器中没有。

答案 18 :(得分：0)

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

  1. 我使用的是一个Firefox似乎不喜欢的.tif文件 - 我改为.png文件。
  2. 我将overflow:auto;添加到了div的CSS中 - display:block;对我不起作用。

答案 19 :(得分：0)

对于那些在FF中遇到问题而在Chrome中遇到问题的人：

您可能会错误地在位置的不同值类型之间进行混合。

例如，

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

会出现此错误。修复可能是：

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

答案 20 :(得分：0)

除了已经说过的内容之外，我能想到的另一件事是画面的创作方式。如果您在Photoshop中制作/编辑了图像，请确保另存为Save For Web ...

有时，如果您将JPG图像用于Photoshop而不保存为Web图像，则可能不会出现在Firefox中。几个星期前，我发生了一个图形艺术家为迷你网站创建了一个漂亮的标题，它不会出现在FF中！

稍后...

尝试在div上设置宽度和高度以展开它。这可能是你的div中没有​​内容的问题。

答案 21 :(得分：0)

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

答案 22 :(得分：0)

这个HTML'基础'标签就像在

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

如果页面中存在此内容，则网址的图片与您当前的网址不相关，而是与给定的基本网址相关。我不知道为什么IE会显示它而Firefox却没有显示它。

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

答案 23 :(得分：0)

您是否完全确定该图像是JPG文件而不是PNG /其他文件？

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

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

答案 24 :(得分：0)

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

你是否有可能以某种方式（使用一些花车或类似的东西）在Firefox中折叠div？

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

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

答案 25 :(得分：-1)

这对我有用：

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

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

此致

马丁

相关问题
最新问题