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

ari*_*iel 4 html css local css3

这很尴尬。我正在学习新事物,但很惊讶自己无法自行解决。

在桌面上,我有一个名为Test的文件夹,在其中有index.html一个名为CSS的文件夹,其中包含index.css一个名为image的文件夹,另一个名为的图像logo.png

在我的index.css文件中,有以下几行:

background: url("images/logo.png") no-repeat;
Run Code Online (Sandbox Code Playgroud)

使用上面的行,我无法在本地显示图像。我尝试使用/imagestest/images但是它不起作用。如果我在本地查看该如何显示?

vis*_*kin 5

如前所述,您在根文件夹中有用于CSS和图像的不同文件夹Test。由于您正在backgroundCSS文件中编写代码,因此:

情况1:

background:url("logo.png");
Run Code Online (Sandbox Code Playgroud)

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


情况2:

background:url("images/logo.png");
Run Code Online (Sandbox Code Playgroud)

images首先在CSS文件夹内搜索文件夹,然后logo.png在该images文件夹内搜索。(但是CSS文件夹中没有images文件夹)。


情况3:

background: url("../images/logo.png") no-repeat;
Run Code Online (Sandbox Code Playgroud)


在这种情况下,..将带您回到主目录(即,从css文件夹到根目录Test。然后/images将您带入images文件夹,它将找到/logo.png图像的路径。)

  • ..返回目录。您在css目录中调用了该映像,但该目录不在其中。 (3认同)