Firefox 中不顯示背景圖像

Question

設置為 DIV 背景的圖像在 IE 中顯示，但在 Firefox 中不顯示。

CSS 示例：

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

（這個問題在很多地方都有描述，但沒有看到任何結論性的解釋或修復。）

Answer 1

對不起，這變得很大，但它涵蓋了我經常發生的兩種可能性。

可能性 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 選項卡中背景屬性的url()部分上，以檢查文件是否正在加載。

可能性2

可能是div沒有內容，因此高度為 0。 確保 div 中至少有一行內容（例如：lorem ipsum delors secorum）或：

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

檢查 Firebug 的布局選項卡（HTML 選項卡的）以檢查 div 的高度/寬度。

Answer 2

奇怪的是，在我的頭在鍵盤上砸了幾個小時后，我添加了 display:table; 以DIV的風格和背景圖片神奇地出現在FF中。

Answer 3

它看起來像一個背景附件問題。 它需要設置為固定（不是滾動）才能在 FF 中工作。 請參閱： http : //www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position

Answer 4

舊帖子，但我只是有一個類似的問題圖像未顯示在 Firefox 中，結果是廣告塊附加組件，必須更改我的圖像名稱

Answer 5

發生在我身上。 jpg 確實在 IE 中顯示，但在 Firefox 或 Chrome 中不顯示。 這是解決方案

為顯示圖像的元素更改以下 css。 它可以是 span、div 或任何其他元素：

顯示：塊

Answer 6

對我來說，這是文件名區分大小寫的問題。 我不確定它是 CSS 還是我的 Ubuntu 操作系統，或者是 firefox，但我最終顯示背景圖像的方式是引用 BlueGrad.jpg 而不是 bluegrad.jpg。 兩者中的前者是如何保存的。 我不認為它會區分大小寫，但確實如此。

Answer 7

跨瀏覽器的解決方案是提供一個以應用程序/域根開始的相對 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 中使用引號，我在這里使用了它們，因為它看起來更漂亮。

Answer 8

嘗試將圖像名稱放在引號中，例如：

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

Answer 9

確保您引用的圖像是相對於 css 文件而不是 html 文件的。

Answer 10

試試這個。

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

Answer 11

我有過類似的問題。 原因是 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;
}

Answer 12

我通過重命名 CSS 類解決了類似的問題。 MSIE 允許 CSS 類 ID 以數字開頭； 火狐沒有。 我創建了一個使用圖像寬度（以像素為單位）的類，例如 .1594px-01a

我實際上知道它是非標准語法，但由於它在 MSIE 中運行良好，我已經忘記了它。 在嘗試了所有其他的東西之后，我終於意識到它可以像命名一樣簡單，只要我在班級面前放了一個字母，就快了！

Answer 13

我發現了導致此問題的兩件事：

1. 我正在使用 Firefox 似乎不喜歡的 .tif 文件 - 我更改為 .png 文件。
2. 我添加了overflow:auto; 到 div 的 CSS - display:block; 對我不起作用。

Answer 14

我的錯誤是使用“\\”而不是“/”。 在 IE 中工作正常，但在其他瀏覽器中無效。

Answer 15

我在 FF 中的 CSS background-image 屬性方面遇到了類似的問題。 它在 IE 中運行良好，但拒絕在 FF 中工作；) 在閱讀了一些帖子后，我確定問題確實是 div 中除了表格之外沒有任何內容（我試圖讓背景圖像調整到大小沒有折疊或擴展，因此在 div 的背景中使用了更大的圖像以形成各種“裁剪”。）對我來說，解決方案似乎只是通過放置一個 img 標簽來簡單地“欺騙”顯示了一個空白的 .png 文件，然后我將其重新調整為正確的圖像高度，寬度設置為 100%。 這對我的問題有效，我希望它可以幫助遇到類似問題的其他人。 可能不是最好的修復，但它是一個修復 ;)

Answer 16

除了已經說過的之外，我唯一能想到的就是這幅畫的創作方式。 如果您在 Photoshop 中制作/編輯了圖像，請確保將其另存為“另存為 Web...

有時，如果您在 Photoshop 中使用 JPG 圖像而不另存為 Web 圖像，則它可能不會出現在 Firefox 中。 幾周前我遇到過這種情況，一位圖形藝術家為一個迷你網站創建了一個漂亮的標題，但它不會出現在 FF 中！

等等...

嘗試在 div 上設置寬度和高度以展開它。 這可能是您的 div 中的無內容問題。

Answer 17

它可能看起來很奇怪，但這對我有用>

#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

Answer 18

（這些似乎不是 OP 的確切情況，但問題有些相關，我找到了我想分享的解決方法）

我也遇到過同樣的問題——除了 Firefox 之外，背景圖片隨處可見——對我來說，這個問題與我正在開發一個瀏覽器插件有關。

我正在使用contentStyleFile屬性在pageMod模塊中注入文件style.css 。 其中，有規則background-image: url(/img/editlist.png); 我在其中引用附加組件外部的圖像文件。 這里的問題是，與其他瀏覽器不同，Firefox 將這個外部域根錯誤解釋為附加組件的內部根！

css 文件是 Chrome 版本的擴展/附加組件的 1:1 端口，所以我不想弄亂它。 這就是為什么我在我的資源文件夾中添加了一個額外的contentStyle規則以及該圖像的副本。 此規則只是覆蓋了 css 文件中的規則。

（事后看來，甚至可能是一種比以前更優雅的方法……）

Answer 19

你可以試試這個：

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

其他聲明是速記 CSS 屬性，我認為它們不是必需的。
你在網上有這個嗎？ 我想看看我能不能稍微擺弄一下。 (本地)

Answer 20

恐怕問題多於答案，但它們可能會幫助您找到正確的答案：

您是否有可能以某種方式（使用一些浮動或類似方式）折疊 Firefox 中的 div？

div 中是否還有其他內容以確保它足夠大以顯示圖像？

您是否安裝了Firebug並查看了頁面上的 CSS 定義？

Answer 21

您確定圖片是 JPG 文件而不是 PNG/其他文件嗎？

我想知道 IE 是否讓您擺脫其他瀏覽器所沒有的東西。

同樣，文件案例是否完全符合規定？

Answer 22

有這樣一個 HTML 'base' 標簽

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

如果這存在於您的頁面中，則該 url 的圖像與您當前的 url 無關，而是與給定的基本 url 相關。 不過，我不知道為什么 IE 顯示它而 Firefox 不顯示。

Webdeveloper Firefox 擴展提供了“顯示損壞的圖像”選項——這可能會派上用場。 此外，您可以嘗試“ Live Http Headers ”來查看是否/什么圖像被請求以及返回碼是什么。

Answer 23

沒有人提到背景起源，所以你去：

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

為我解決了問題； 我的背景顯然在我的 div 之外。

Answer 24

對於那些在 FF 中遇到問題但在 Chrome 中沒有的人：

您可能會錯誤地在職位的不同值類型之間混用。

例如，

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

會犯這個錯誤。 修復方法可能是：

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

Answer 25

在我的情況下，它是由 FF 隱私和安全設置中的“嚴格”模式引起的。 在我更改為“標准”后，所有背景圖像都變得可見。

Answer 26

這對我有用：

1) 單擊背景圖像表。
2) 右鍵單擊​​頁面底部的狀態欄。
3) 單擊內聯樣式。
4) 單擊背景樣式選項卡。
5) 如果您在顏色標題中看到“透明”，那就是問題所在。
6) 單擊顏色框並選擇一種顏色（白色是不錯的選擇。）
7) 顏色標題現在應該顯示為白色。
8) 單擊確定。
9) 保存頁面。
10) 上傳頁面並覆蓋現有文件。
11) 刷新頁面，您的背景圖片將顯示。

注意：請確保您已上傳您的背景圖片 jpeg。 我忘記上傳背景 jpeg 一次，並花了很長時間試圖對其進行排序，然后才意識到我的錯誤。

問候

馬丁