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

Question

這非常令人尷尬。 我正在學習新事物，但我很驚訝我無法自己解決這個問題。

在我的桌面上，我有一個名為Test的文件夾，我有一個index.html和一個名為CSS的文件夾，其中包含index.css和另一個名為images的文件夾，其中包含一個名為logo.png的圖像。

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

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

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

Answer 1

如您所述，您在根文件夾Test有不同的CSS和圖像文件夾。 由於您在CSS文件中編寫background代碼：

情況1：

background:url("logo.png");

將在CSS文件夾中搜索您的圖像。

---

案例2：

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

將首先在CSS文件夾中搜索images文件夾，然后在該images文件夾中搜索logo.png 。 （但CSS文件夾中沒有圖像文件夾）。

---

情形3：

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

在這種情況下..將帶你回到主目錄（即從css文件夾到你的root forder Test 。然后/images會把你帶到images文件夾中，它會找到/logo.png作為你圖像的路徑。）

Answer 2

嘗試將此更改為

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

Answer 3

基本上，你必須從邏輯上思考。 如果您在一個文件夾中包含的CSS文件中，則會在該文件夾中搜索該文件中的所有鏈接。 如果要鏈接到站點根目錄中名為/ img的文件夾中的圖像，則必須通過使用向上移動一個級別

../img/pic.extension

Answer 4

將img更改為您班級的名稱。 使用內容而不是背景或背景圖像，並設置一些寬度。

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