如何在本地環境中通過CSS顯示圖像？

這很尷尬。我正在學習新的東西，但我很驚訝，我無法自己弄清楚這一點。如何在本地環境中通過CSS顯示圖像？

在我的桌面上，我有一個名爲Test文件夾和我有index.html並呼籲logo.png一個名爲CSS文件夾，其中包含index.css和調用圖像的圖像另一個文件夾。

在我index.css文件，我有以下行：

background: url("images/logo.png") no-repeat;

使用上面行中我不能在本地顯示圖像。我嘗試使用/images和test/images，但它不起作用。如果我在本地查看它，該如何顯示？

2013-10-06 ariel

見http://stackoverflow.com/questions/9384299/css-relative-url-to-images ..查找相對URL路徑..你會想'」 ../images/logo.png 「' –

正如您所提到的，您在根文件夾Test中有不同的CSS和圖像文件夾。既然你是爲background在你的CSS文件編寫代碼：

案例1：

background:url("logo.png");

將搜索圖像CSS文件夾內。

案例2：

background:url("images/logo.png");

將搜索images文件夾中第一個CSS文件夾內，然後將搜索logo.png該images文件夾內。（但是你的CSS文件夾裏沒有圖像文件夾）。

情形3：

background: url("../images/logo.png") no-repeat;

在這種情況下..將帶你回到主目錄（即從css文件夾複製到你的根forder Test然後/images將帶你裏面images文件夾，它會找到/logo.png作爲您的圖像的路徑。）

2013-10-06 02:08:41 vishalkin

工作。文件夾名稱之前從未見過點的使用情況。這是爲什麼？ – ariel

@ariel請將此答案標記爲正確，以便不會有更多重複答案。謝謝 – vishalkin

..回去一個目錄。你在css目錄中調用了圖像，它不在。 – Seth

嘗試改變它爲

background-image: url("images/logo.png") no-repeat;

2013-10-06 02:11:17

他在一個文件夾中具有'圖像'而在另一個文件夾中具有'css'。 – vishalkin

基本上，你將不得不邏輯思考。如果您在一個文件夾中包含的CSS文件中，則該文件夾中的文件中的所有鏈接都將被搜索到。如果你想叫你的站點的根/ IMG文件夾中的鏈接到的圖像，你將不得不使用

../img/pic.extension

-1

更改IMG到您的類的名稱移至上一層次。使用內容而不是背景或背景圖像，並設置一些寬度。

img { 
    content: url("../img/Wizard-of-os-black.png"); 
    width: 90px; 
}

2015-09-29 18:03:17 misterzik

這是一個糟糕的否定答案嗎？ – misterzik

也許是因爲你拼錯了'奧茲'？ –

回答