Html CSS 背景图像未加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21374534/
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
CSS Background image not loading
提问by jaredad7
I have followed all of the tutorials, which all say the say thing. I specify my background inside of body in my css style sheet, but the page just displays a blank white background. Image is in the same directory as the .html and the .css pages. The tutorial says that
我已经遵循了所有教程，这些教程都说了算。我在我的 css 样式表中在 body 内指定了我的背景，但页面只显示一个空白的白色背景。图像与 .html 和 .css 页面位于同一目录中。教程是这样说的
<body background="image.jpeg">
is deprecated, so I use, in css,
已弃用，所以我在 css 中使用，
body {background: url('image.jpeg');}
no success. Here is the entire css style sheet:
没有成功。这是整个 css 样式表：
body
{
background-image: url('nickcage.jpg');
padding-left: 11em;
padding-right: 20em;
font-family:
Georgia, "Times New Roman",
Times, serif;
color: red;
}
采纳答案by Krish
here is another image url result..working fine...i'm just put only a image path..please check it..
这是另一个图像 url 结果..工作正常......我只是放了一个图像路径..请检查它..
Fiddel:http://jsfiddle.net/287Kw/
菲德尔：http: //jsfiddle.net/287Kw/
body
{
background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
padding-left: 11em;
padding-right: 20em;
font-family:
Georgia, "Times New Roman",
Times, serif;
color: red;
}
回答by Frankenscarf
First of all, wave bye-bye to those quotes:
首先，告别那些引述：
background-image: url(nickcage.jpg); // No quotes around the file name
Next, if your html, css and image are all in the same directory then removing the quotes should fix it. If, however, your css or image are in subdirectories of where your html lives, you'll want to make sure you correctly path to the image:
接下来，如果你的 html、css 和图像都在同一个目录中，那么删除引号应该可以修复它。但是，如果您的 css 或图像位于 html 所在位置的子目录中，则您需要确保正确路径到图像：
background-image: url(../images/nickcage.jpg); // css and image live in subdorectories
background-image: url(images/nickcage.jpg); // css lives with html but images is a subdirectory
Hope it helps.
希望能帮助到你。
回答by Timothy Carr
I had the same issue. The problem ended up being the path to the image file. Make sure the image path is relative to the location of the CSS file instead of the HTML.
我遇到过同样的问题。问题最终是图像文件的路径。确保图像路径相对于 CSS 文件而不是 HTML 的位置。
回答by user3670684
try this
尝试这个
background-image: url("/yourimagefolder/yourimage.jpg");
I had the same problem when I used background-image: url("yourimagefolder/yourimage.jpg");
我在使用时遇到了同样的问题 background-image: url("yourimagefolder/yourimage.jpg");
Notice the slash that made the difference. The level of the folder was the reason why I could not load the image. I guess you also encountered the same issue
请注意造成差异的斜线。文件夹的级别是我无法加载图像的原因。我猜你也遇到了同样的问题
回答by Andrew Wiley
I ran into the same problem. If you have your images within folders then try this
我遇到了同样的问题。如果您的图像在文件夹中，请尝试此操作
background-image: url(/resources/img/hero.jpg);
Don't forget to put the backslash in front of the first folder.
不要忘记将反斜杠放在第一个文件夹的前面。
回答by George.
I'd like to share my debugging process because I was stuck on this issue for at least an hour. Image could not be found when running local host. To add some context, I am styling within a rails app in the following directory:
我想分享我的调试过程，因为我在这个问题上被困了至少一个小时。运行本地主机时找不到图像。为了添加一些上下文，我在以下目录中的 rails 应用程序中设置样式：
apps/assets/stylesheets/main.scss
I wanted to render background image in header tag. The following was my original implementation.
我想在标题标签中呈现背景图像。以下是我的原始实现。
header {
text-align: center;
background: linear-gradient(90deg, #d4eece, #d4eece, #d4eece),
url('../images/header.jpg') no-repeat;
background-blend-mode: multiply;
background-size: cover;
}
...as a result I was getting the following error in rails server and the console in Chrome dev tools, respectively:
...因此，我分别在 Rails 服务器和 Chrome 开发工具中的控制台中收到以下错误：
ActionController::RoutingError (No route matches [GET] "/images/header.jpg")
GET http://localhost:3000/images/header.jpg 404 (Not Found)
I tried different variations of the url:
我尝试了网址的不同变体：
url('../images/header.jpg') # DID NOT WORK
url('/../images/header.jpg') # DID NOT WORK
url('./../images/header.jpg') # DID NOT WORK
and it still did not work. At that point, I was very confused...I decided to move the image folder from the assets directory (which is the default) to within the stylesheets directory, and tried the following variations of the url:
它仍然不起作用。那时，我很困惑……我决定将图像文件夹从资产目录（这是默认值）移动到样式表目录中，并尝试了以下 url 变体：
url('/images/header.jpg') # DID NOT WORK
url('./images/header.jpg') # WORKED
url('images/header.jpg') # WORKED
I no longer got the console and rails server error. But the image still was not showing for some reason. After temporarily giving up, I found out the solution to this was to add a height property in order for the image to be shown...
我不再收到控制台和 Rails 服务器错误。但是由于某种原因，图像仍然没有显示。暂时放弃后，我发现解决这个问题的方法是添加一个高度属性，以便显示图像...
header {
text-align: center;
height: 390px;
background: linear-gradient(90deg, #d4eece, #d4eece, #d4eece),
url('images/header.jpg') no-repeat;
background-blend-mode: multiply;
background-size: cover;
}
Unfortunately, I am still not sure why the 3 initial url attempts with "../images/header.jpg" did not work on localhost, or when I should or shouldn't be adding a period at the beginning of the url.
不幸的是，我仍然不确定为什么使用“../images/header.jpg”的 3 次初始 url 尝试在 localhost 上不起作用，或者我何时应该或不应该在 url 的开头添加句点。
It might have something to do with how the default link tag is setup in application.html.erb, or maybe it's a .scss vs .css thing. Or, maybe that's just how the background property with url() works (the image needs to be within same directory as the css file)? Anyhow, this is how I solved the issue with CSS background image not loading on localhost.
它可能与如何在 application.html.erb 中设置默认链接标签有关，或者它可能是 .scss 与 .css 的事情。或者，也许这就是带有 url() 的背景属性的工作方式（图像需要与 css 文件位于同一目录中）？无论如何，这就是我如何解决未在本地主机上加载 CSS 背景图像的问题。
回答by akaMahesh
The path to the image should be relative, that means if css file is in css folder than you should start path with ../such as
图像的路径应该是相对的，这意味着如果 css 文件在 css 文件夹中，那么您应该以../开始路径，例如
body{
background-image: url(../images/logo.jpg);
}this is because you have to get back to home dir by ../path and then /images/logo.jpgpath to the image file. If you are including css file in html itself
这是因为您必须通过../路径返回主目录，然后返回图像文件的/images/logo.jpg路径。如果您在 html 本身中包含 css 文件
body{
background-image: url(images/logo.jpg);
}回答by Usman
for me following line is working for me , I put it in the css of my body ( where image is in same folder in which my css and .html files ) :
对我来说，以下行对我有用，我将它放在我身体的 css 中（其中图像位于我的 css 和 .html 文件所在的同一文件夹中）：
background: url('test.jpg');
Other thing that you must care about is , be careful about image extension , be sure that your image has .jpeg or .jpg extension. Thanks
您必须关心的另一件事是，注意图像扩展名，确保您的图像具有 .jpeg 或 .jpg 扩展名。谢谢
回答by Omar Albeik
I found the problem was you can't use short URL for image "img/image.jpg"
我发现问题是您不能为图像“img/image.jpg”使用短网址
you should use the full URL "http://www.website.com/img/image.jpg", yet I don't know why !!
你应该使用完整的 URL“ http://www.website.com/img/image.jpg”，但我不知道为什么！！
回答by user3172852
I had changed the document root for my wamp-server-installed apache web server. so using the relative url i.e. (images/img.png) didn't work. I had to use the absolute url in order for it to work i.e.
我已经为我的 wamp-server-installed apache web 服务器更改了文档根目录。所以使用相对 url ie (images/img.png) 不起作用。我必须使用绝对网址才能使其工作，即
background-image:url("http://localhost/project_x/images/img.png");
background-image:url(" http://localhost/project_x/images/img.png");
