CSS：背景圖像不能正常工作

-1

我剛剛開始在Web開發世界，所以我是一個初學者，當涉及到HTML和CSS。CSS：背景圖像不能正常工作

我想爲我的網頁上的一段文字創建一個背景圖片，但由於某種原因圖片不會加載。

圖片URL
我100％肯定我有正確的URL（將文件存儲在本地目錄），因爲使用圖片代碼，

IMG SRC =「C：/ ... ./myimage.png'

完美無缺。儘管在CSS中使用background-image並不適用。

我也嘗試了不同的IDE來看看我最喜歡哪一個。我開始使用記事本++和Chrome瀏覽器。使用這個，背景圖像工作正常。如果使用括號，即使使用chrome作爲實時反饋工具，背景圖片也不會顯示。

有人能幫我理解爲什麼這不起作用嗎？

這裏是我寫的HTML和CSS。感謝您提供任何幫助。

HTML：

<p id='bgimgex'>Here is a paragraph of text which has a background image</p>

CSS

#bgimgex{ 

    font-size:1.7em; 
    color:cyan; 
    margin:auto; 
    width:50vw; 
    background-position:center; 
    background-image:url('C:/Users/Adad Dayos/Desktop/phase 2/course work/HTML series/HTML5_course_1/mod 5/images/melly.png'); 
    background-size:100% 100%; 
    background-repeat:no-repeat; 
}

來源

2017-06-20 Adam Day

您的CSS與HTML文件相關的地方在哪裏？ – Ryan

您是否使用xampp或wamp等服務器，或者您是否從Windows打開html文件？ – MarioZ

我的html文件位置有2個子目錄，圖像和css。圖像文件夾有圖像，而css文件夾有我的css文件。這就是爲什麼我不得不在我的css屬性中使用完整的圖像目錄，因爲圖像不在同一個目錄中，或者在css的子目錄中。 –

只需將圖像複製到項目目錄中，並避免在子文件夾名稱中使用空格（或...）。

如果問題仍然沒有解決，請檢查您的控制檯在鉻（按F12），看看有什麼錯誤。

來源

2017-06-20 18:12:22

感謝您的建議。我沒有檢查控制檯，發現這個：「不允許加載本地資源」 –

@Adam：所以路徑是正確的，但是由於CORS你的瀏覽器不允許你加載資源。 –

到你的文件正確的文件路徑的最簡單方法是複製/粘貼路徑給它在瀏覽器地址酒吧並擊中輸入。它會被自動正確編碼，你可以將結果路徑複製/粘貼到你的CSS中。

background-image:url('file:///C:/Users/Adad%20Dayos/Desktop/phase%202/course%20work/HTML%20series/HTML5_course_1/mod%205/images/melly.png');

從 file://前綴

除此之外，我也換成空間與%20。如果不明顯，這隻會在您的機器上運行。

您的問題似乎與CORS有關。

爲了突破這一點，你可以用這個PARAM推出自己的Chrome實例：

chrome.exe --allow-file-access-from-files

或者你可以安裝Allow-Control-Allow-Origin:* Chrome擴展程序。

既然你想在你的文件系統中使用，那麼基於設置頭部服務器端的解決方案顯然不起作用。至於其他瀏覽器，你需要自己搜索它，但現在，你知道原因，找到一個解決方案應該是微不足道的。

來源

2017-06-20 18:07:40

聽起來像一個好主意，但不幸的是沒有工作。不管怎麼說，還是要謝謝你。 –

@Adam，瀏覽器控制檯中是否有404錯誤，說它無法找到該文件？ –

原來，這是一個安全問題的事情，因爲我使用完整的本地URL。我現在已經解決了這個問題，但是感謝您向我展示如何更改權限。很有用。 –

您需要更改「\」的斜槓「/」，因爲您的css位於單獨的文件中，並且正從瀏覽器加載。

background-image:url('C:\\Users\\Adad Dayos\\Desktop\\phase 2\\course work\\HTML series\\HTML5_course_1\\mod 5\\images\\melly.png');

來源

2017-06-20 18:21:13 MarioZ

下面的代碼工作在所有的瀏覽器。我在我的系統中測試過。請檢查控制檯（f12），如果瀏覽器無法加載背景圖像。我沒有看到任何問題。同時，請使用file：/// C：/用戶的背景圖像

<html> 
     <style> 
    #bgimgex{ 

     font-size:1.7em; 
     color:cyan; 
     margin:auto; 
     width:50vw; 
     background-position:center; 
     background-image:url('file:///C:/Users/Public/Pictures/Sample Pictures/Lighthouse.jpg'); 
     background-size:100% 100%; 
     background-repeat:no-repeat; 
    } 


    </style> 

    <body> 
    <p id='bgimgex'>Here is a paragraph of text which has a background image</p> 
    </body> 
    </html>

來源

2017-06-20 18:25:46 James

-2

SOLUTION：
謝謝帕勒姆Heidari幫助我解決這個問題。我會upvote你的答案，但我是新的堆棧交換，並沒有代表這樣做。

所以我用「檢查元素」檢查中鉻控制檯看到：

Console debug info

這讓我意識到有一個安全問題阻止瀏覽器取回我的文件。顯然，當您爲本地文件而不是相對目錄提供完整目錄時會發生這種情況。因此，要解決這個問題，我改變了我的網址：

background-image:url('../images/melly.PNG');

另外，感謝安德烈·喬治烏告訴我如何解決這個問題，儘管我敢肯定，我只是在它的工作呢。

來源

2017-06-20 18:30:55

「我沒有代表這樣做」不適用於您自己的問題。既然你是提問者，你應該能夠[（a）對你發現的問題的答案進行投票，並且（b）接受答案]（https://stackoverflow.com/help/privileges/create-帖子）。 – Krease

謝謝，還在學習如何使用這個網站。 –

CSS：背景圖像不能正常工作

回答

相關問題