HTML 和 CSS 背景图像未显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8838847/
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
HTML and CSS Background-image is not showing up
提问by user962206
I already double checked my URL, and the name of the files, but I can't seem to get the image to show up. Why is it like that? Here's my code (take note the <p>is inside the body tags, I didn't add the full code, I only added the head and the specific problem).
我已经仔细检查了我的 URL 和文件名，但我似乎无法显示图像。为什么会这样？这是我的代码（注意<p>是在 body 标签内，我没有添加完整的代码，我只添加了头部和具体问题）。
<html>
<head>
<title>Head First Lounge.</title>
<link type="text/css"
rel="stylesheet"
href="stylesheet/style.css"
media="screen"/>
</head>
<p class = "guarantee">
Our guarantee: at the lounge, we're committed to providing you,
our guest, with an exceptional experience every time you visit.
Whether you're just stopping by to check in on email over an
elixir, or are here for an out-of-the-ordinary dinner, you'll
find our knowledgeable service staff pay attention to every detail.
If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>
And here's the CSS rule for that part
这是该部分的 CSS 规则
.guarantee{
background-image: url(images/background.gif);
font-family: "Geogia", "Times New Roman", Times, serif;
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #a7cece;
padding: 25px;
margin: 30px;
line-height: 1.9em;
font-style: italic;
color: #444;
}
回答by Drew
Try this:
尝试这个：
background-image: url(../images/background.gif);
Without the ../it is looking for an images folder inside your stylesheet folder which does not exist. So you have to go back a directory where the images folder is located.
如果没有../它，它会在您的样式表文件夹中寻找一个不存在的图像文件夹。因此，您必须返回图像文件夹所在的目录。
Edit: You can also shorten up your CSS styles like so:
编辑：您还可以像这样缩短 CSS 样式：
.guarantee{
background: #a7cece url(../images/background.gif);
border: 1px solid black;
}
回答by KingCronus
The browser will be searching for the image within your stylesheet directory at the moment.
此时浏览器将在您的样式表目录中搜索图像。
Might be worth trying changing
可能值得尝试改变
background-image: url(images/background.gif);
to
到
background-image: url(/images/background.gif);
which might be the cause of the problem.
这可能是问题的原因。
回答by Seth
I was having this same problem solved it by adding / to the beginning of the image url
我遇到了同样的问题，通过在图像 url 的开头添加 / 来解决它
(example: background-image: url(/images/background.gif);)
（例如：背景图片：url(/images/background.gif);）
Hope this helps :)
希望这可以帮助 ：）
回答by Emc_tgn15
I know this answer is a bit late but this link will give you a detailed explanation for css file paths.
我知道这个答案有点晚了，但此链接将为您提供有关 css 文件路径的详细说明。
/ returns to the root directory
../ moves one directory backwards
../../ moves two directory backwards
回答by Sai Dubbaka
May be you've used backward slashes (\) instead of forward slashes (/) in the image path.
可能是您在图像路径中使用了反斜杠 (\) 而不是正斜杠 (/)。
I did this mistake and was fighting with my chrome browser. I copied the image path from Windows Explorer (which uses backward slashes)
我犯了这个错误并且正在与我的 chrome 浏览器作斗争。我从 Windows 资源管理器中复制了图像路径（使用反斜杠）
