在Chrome瀏覽器中未顯示背景圖像，Firefox

我正嘗試使用Dreamweaver將背景圖像加載到頁面。它在IE和Edge中顯示，但不顯示Chrome或Mozilla。我試圖移動照片的位置（文件路徑），並試圖在直線HTML和CSS中得到相同的結果。我找不到另一種編寫代碼的方式，或者想到另一種方式（對此非常陌生），以便它可以在所有瀏覽器中顯示。這是CSS代碼：在Chrome瀏覽器中未顯示背景圖像，Firefox

background-image: url('file:///D:/website.com/httpdocs/pic/greenleaf.jpg')

設置在主體括號內;

和HTML：

<body background="file:///D:/website.com/httpdocs/pic/Demo Page Song Thumbnails/Jpeg Thumbnails/greenleaf.jpg">

我到處看看我找到的例子有省略號，像URL（... website.com/greanleaf.jpg）和點完全讓我困惑。我想也許我需要幫助文件路徑的工作方式。

來源

2017-02-27 riftvogel

您的項目中是否有assets/images路徑文件夾？ – Nicholas

這是由於在Firefox和Chrome瀏覽器中實現了body和html標籤。正文和HTML標籤只有它們的HTML內容一樣大。在Edge和IE中，HTML和Body的大小自動調整到視圖端口的大小。

添加到您的CSS

body, html{ 
    min-height:100%; 
    min-width:100%; 
}

來源

2017-02-27 22:40:50

-1

首先，你需要確保瀏覽器的正確定位圖像。

一個確定的方法是查看Chrome的網絡選項卡。在Chrome中點擊F12以顯示開發者工具。點擊網絡標籤，然後刷新瀏覽器。您將收到已加載/未加載的資源列表。如果您的圖像以紅色列出，則無法加載。你的問題將是一個不正確的路徑。

這是理解相對文件路徑的好資源。 https://css-tricks.com/quick-reminder-about-file-paths/

但是，如果它確實加載成功，圖像不會顯示另一個原因。沒有看到你所有的代碼，我只能猜測。你的圖像是空的容器？沒有內容或指定的高度，背景圖片將不會在某些瀏覽器中顯示。

來源

2017-02-27 22:42:44

可以找到圖像，因爲他聲稱它在IE和Edge中工作，它是一個路徑問題，它不會在任何工作。 –

@MartinBarker，不錯，但是由於OP使用絕對路徑，可能是Firefox和Chrome阻止了這些。在開發人員工具中進行調查可能會發現本地文件是否被阻止。 – Dexter

更新您的答案以反映這一點，因爲它不會是一個不正確的路徑，這將違反安全策略。這正是我的意見和我的意見。 –

好了，如果你的代碼是正確的，它在IE和邊緣顯示的圖像嘗試

刷新你的瀏覽器，但無法正常使用此命令：控制+ Shift + R鍵

使你一定會運行那個網站的最新最好的版本

網站的服務。

來源

2017-02-28 00:59:09 Nadim

在Chrome瀏覽器中未顯示背景圖像，Firefox

回答

相關問題