HTML 和 CSS 背景图像未显示
[英]HTML and CSS Background-image is not showing up
问题描述
I already double checked my URL, and the name of the files, but I can't seem to get the image to show up.
我已经仔细检查了我的 URL 和文件名，但我似乎无法显示图像。 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).这是我的代码（注意<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;
}
6 个解决方案
解决方案1
33 已采纳 2012-01-12 16:52:34
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. 因此，您必须返回images文件夹所在的目录。
Edit : You can also shorten up your CSS styles like so: 编辑 ：您还可以缩短CSS样式，如下所示：
.guarantee{
background: #a7cece url(../images/background.gif);
border: 1px solid black;
}
解决方案2
2 2012-01-12 16:53:11
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. 这可能是问题的原因。
解决方案3
0 2015-08-11 14:07:52
I was having this same problem solved it by adding / to the beginning of the image url 我有同样的问题通过添加/到图像网址的开头来解决它
(example: background-image: url(/images/background.gif);) （例如：background-image：url（/images/background.gif）;）
Hope this helps :) 希望这可以帮助 ：）
解决方案4
0 2016-02-13 18:30:43
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
https://css-tricks.com/quick-reminder-about-file-paths/ https://css-tricks.com/quick-reminder-about-file-paths/
解决方案5
0 2022-01-23 22:14:57
FYI This page just helped me figure out the solution to my problem, where I was viewing an html page in my Chrome browser and the main.css was not loading the background image, and THE REASON WAS, because the 'relative link' in the main.css had a / at the beginning, and as someone said above, that goes to the ROOT folder, which on my Windows OS is of course C:, but on the server it is the root for that site which DOES work!仅供参考，此页面只是帮助我找出了问题的解决方案，我在 Chrome 浏览器中查看 html 页面，而 main.css 没有加载背景图像，原因是，因为“相对链接”在main.css 开头有一个 /，正如上面有人所说，它转到 ROOT 文件夹，在我的 Windows 操作系统上当然是 C:，但在服务器上它是该站点的根目录，它确实可以工作！ So I had to remove that initial / at the beginning of the /images/backgroundimage.jpg link and then it DID work on windows.所以我不得不删除 /images/backgroundimage.jpg 链接开头的初始 / ，然后它在 Windows 上工作。 Now lets see if it works on my server without that slash...YUP!现在让我们看看它是否可以在没有斜线的情况下在我的服务器上运行......是的！
So it DOES work with or without the / at the beginning of /images/backgroundimage.jpg in my css on this server, but on Windows the / brings it to the root c:\\ drive.所以它在这个服务器上我的 css 中 /images/backgroundimage.jpg 的开头有或没有 / 都可以工作，但在 Windows 上 / 将它带到根 c:\\ 驱动器。 And btw I used "inspect" in the Browser and the "Console" at the bottom to see the link C:\\images... that it was looking for, then found this page with this answer, that beginning / brings it to the ROOT folder.顺便说一句，我在浏览器中使用“检查”和底部的“控制台”来查看它正在寻找的链接 C:\\images...，然后找到这个答案的页面，开始/将它带到根文件夹。
Thank you for helping me figure that out!谢谢你帮我解决这个问题！
解决方案6
-1 2014-10-02 17:21:31
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. 我犯了这个错误并且正在使用我的Chrome浏览器。 I copied the image path from Windows Explorer (which uses backward slashes) 我从Windows资源管理器（使用反斜杠）复制了图像路径
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.