我已经按照所有的教程操作了，它们都说同一件事。我在css样式表中将我的背景设定在body内，但页面显示为空白白的背景。图片与.html和.css页面位于同一目录下。教程上说
<body background="image.jpeg">
已被弃用，所以我在css中使用
body {background: url('image.jpeg');}
没有成功。下面是完整的CSS样式表：
body
{
background-image: url('nickcage.jpg');
padding-left: 11em;
padding-right: 20em;
font-family:
Georgia, "Times New Roman",
Times, serif;
color: red;
}
首先，向那些引号挥手告别：
background-image: url(nickcage.jpg); // No quotes around the file name
接下来，如果你的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
希望能帮到你。
background-image: url()。假设文件系统中有 Index.html\css\stylesheet.css 和 index.html\images\image.png。 - Andrew我曾经遇到过同样的问题。问题最终是由于图片文件路径引起的。请确保图片路径相对于CSS文件所在位置而非HTML文件。
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;
}
background-image: url(/resources/img/hero.jpg);
试一下这个
background-image: url("/yourimagefolder/yourimage.jpg");
当我使用 background-image: url("yourimagefolder/yourimage.jpg"); 时，我遇到了同样的问题。
请注意斜杠造成的差异。文件夹级别是导致我无法加载图像的原因。我猜你也遇到了同样的问题。
我想分享一下我的调试过程，因为我卡在这个问题上至少一个小时。当运行本地主机时找不到图像。为了添加一些背景，我正在以下目录中的rails应用程序中进行样式设置:
apps/assets/stylesheets/main.scss
header {
text-align: center;
background: linear-gradient(90deg, #d4eece, #d4eece, #d4eece),
url('../images/header.jpg') no-repeat;
background-blend-mode: multiply;
background-size: cover;
}
由于此问题，我在Rails服务器和Chrome Dev工具的控制台中分别收到以下错误：
ActionController::RoutingError (No route matches [GET] "/images/header.jpg")
GET http://localhost:3000/images/header.jpg 404 (Not Found)
我尝试了不同的url变化：
url('../images/header.jpg') # DID NOT WORK
url('/../images/header.jpg') # DID NOT WORK
url('./../images/header.jpg') # DID NOT WORK
然而，它仍然没有起作用。那时我非常困惑......我决定将图像文件夹从资产目录（默认情况下）移动到样式表目录中，并尝试以下url的变化：
url('/images/header.jpg') # DID NOT WORK
url('./images/header.jpg') # WORKED
url('images/header.jpg') # WORKED
我不再遇到控制台和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;
}
很遗憾，我仍然不确定为什么在本地主机上使用 "../images/header.jpg" 进行的3次初始url尝试失败，或者何时应该添加一个句点在URL开头。
这可能与application.html.erb中默认链接标签的设置有关，或者可能是.scss与.css之间的问题。或者，也许这就是background属性与url()一起使用的方式（图片需要与css文件位于同一目录中）？无论如何，这是我解决本地主机上CSS背景图像未加载的问题的方法。
图片的路径应该是相对路径，这意味着如果CSS文件在CSS文件夹中，则您应该以../开头的路径，例如
body{
background-image: url(../images/logo.jpg);
}这是因为您需要通过 ../ 路径返回到主目录，然后通过 /images/logo.jpg 路径访问图像文件。 如果您在HTML中包含CSS文件
body{
background-image: url(images/logo.jpg);
}<div> 中使用 background: url('image.jpeg'); 是无效的。请在属于图像 <div> 的类中使用 padding。body
{
background-image: url('../../nickcage.jpg');
padding: 30%;
font-family:
Georgia, "Times New Roman",
Times, serif;
color: red;
}
对于我来说，以下行可以正常工作，我将其放在了我的body的css中（其中图像与我的css和.html文件在同一个文件夹中）:
background: url('test.jpg');
您需要注意的另一件事是，要小心图像扩展名，确保您的图像具有 .jpeg 或 .jpg 扩展名。谢谢。
yourselector {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire
container */
}