Html 如何在本地环境中通过 CSS 显示图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19204674/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I display an image via CSS in my local environment?
提问by ariel
This is quite embarrasing. I am learning new things but I am surprised I can't figure this out on my own.
这是相当尴尬的。我正在学习新事物，但我很惊讶我自己无法解决这个问题。
On my desktop, I have a folder called Test and in that I have index.htmland a folder called CSS, which contains index.cssand another folder called images with an image called logo.png.
在我的桌面上，我有一个名为 Testindex.html的文件夹，其中有一个名为 CSS 的文件夹，其中包含index.css另一个名为图像的文件夹，其中包含一个名为logo.png.
In my index.cssfile, I have the following line:
在我的index.css文件中，我有以下行：
background: url("images/logo.png") no-repeat;
Using the above line I can't display the image locally. I tried using /imagesand test/imagesbut it doesn't work. How can I display this if I am viewing it locally?
使用上面的行，我无法在本地显示图像。我试过使用/imagesandtest/images但它不起作用。如果我在本地查看，如何显示？
回答by vishalkin
As you mentioned, you have different folders for CSS and images inside your root folder Test. Since you are writing code for backgroundin your CSS file:
正如您所提到的，您的根文件夹中有不同的 CSS 和图像文件夹Test。由于您正在backgroundCSS 文件中编写代码：
Case 1:
情况1：
background:url("logo.png");
Will search for your image inside CSSfolder.
将在CSS文件夹中搜索您的图像。
Case2:
案例2：
background:url("images/logo.png");
Will search for imagesfolder first inside CSS folder and then will search for logo.pnginside that imagesfolder. (But there is no images folder inside your CSS folder).
将images首先在 CSS 文件夹中搜索文件夹，然后logo.png在该images文件夹中搜索。（但是您的 CSS 文件夹中没有图像文件夹）。
Case3:
案例3：
background: url("../images/logo.png") no-repeat;
In this case ..will take you back to the main directory (i.e. from cssfolder to your root forder Test. Then /imageswill take you inside imagesfolder and it will find /logo.pngas a path to your image.)
在这种情况下，..将带您回到主目录（即从css文件夹到您的根目录Test。然后/images将带您进入images文件夹，它会找到/logo.png您的图像的路径。）
回答by misterzik
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;
}
回答by Ron_B
Try changing this to
尝试将其更改为
background-image: url("images/logo.png") no-repeat;
回答by somethinghereplease1
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
