如何在本地环境中通过CSS显示图像?

This is quite embarrasing. I am learning new things but I am surprised I can't figure this out on my own.

这是很为embarras。我正在学习新的东西，但我很惊讶我不能自己解决这个问题。

On my desktop, I have a folder called Test and in that I have index.html and a folder called CSS, which contains index.css and another folder called images with an image called logo.png.

在我的桌面上，我有一个名为Test的文件夹，里面有索引。html和一个名为CSS的文件夹，其中包含索引。css和另一个文件夹，称为图像，带有一个名为logo.png的图像。

In my index.css file, I have the following line:

在我的索引。css文件，我有以下一行:

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

Using the above line I can't display the image locally. I tried using /images and test/images but it doesn't work. How can I display this if I am viewing it locally?

使用上面这一行，我不能在本地显示图像。我试过使用/图片和测试/图片，但是没用。如果我在本地查看，如何显示这个?

4 个解决方案

#1

As you mentioned, you have different folders for CSS and images inside your root folder Test. Since you are writing code for background in your CSS file:

如前所述，在根文件夹测试中，CSS和图像有不同的文件夹。因为您正在为CSS文件的背景编写代码:

Case 1:

案例1:

background:url("logo.png");

Will search for your image inside CSS folder.

将在CSS文件夹中搜索您的图像。

Case2:

例2:

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

Will search for images folder first inside CSS folder and then will search for logo.png inside that images folder. (But there is no images folder inside your CSS folder).

首先在CSS文件夹中搜索图像文件夹，然后搜索logo。在那个图像文件夹里的png。(但是CSS文件夹中没有图像文件夹)。

Case3:

Case3:

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

In this case .. will take you back to the main directory (i.e. from css folder to your root forder Test. Then /images will take you inside images folder and it will find /logo.png as a path to your image.)

在这种情况下. .将带您回到主目录(即从css文件夹到您的root forder测试)。然后/images将带你进入images文件夹，它会找到/logo。将png作为图像的路径)

#2

Try changing this to

试着改变这

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

#3

Basically, you would have to think logically. If your in a CSS file in contained within a folder, all links in the file are searched in the folder. If you want to link to an image in a folder called /img in the root of your site, you would have to move up a level by using

基本上，你得有逻辑地思考。如果您的CSS文件包含在文件夹中，文件中的所有链接将在文件夹中搜索。如果您想要链接到一个位于站点根目录中名为/img的文件夹中的图像，您必须使用

../img/pic.extension

#4

-1

Change img to the name of your class. Use content instead of background or background-image, and Set some width.

将img更改为类的名称。使用内容而不是背景或背景图像，并设置一些宽度。

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

#1