CSS 背景图像未加载
[英]CSS Background image not loading
问题描述
我已经遵循了所有教程，这些教程都说了算。 我在我的 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;
}
18 个解决方案
解决方案1
48 2014-01-27 06:56:01
首先，告别那些引述：
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
希望能帮助到你。
解决方案2
23 2016-10-03 19:53:47
我遇到过同样的问题。 问题最终是图像文件的路径。 确保图像路径相对于 CSS 文件而不是 HTML 的位置。
解决方案3
8 已采纳 2014-01-27 06:48:57
这是另一个图像 url 结果..工作正常......我只是放了一个图像路径..请检查它..
菲德尔： 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;
}
解决方案4
7 2015-02-25 04:18:38
尝试这个
background-image: url("/yourimagefolder/yourimage.jpg");
我在使用background-image: url("yourimagefolder/yourimage.jpg");时遇到了同样的问题background-image: url("yourimagefolder/yourimage.jpg");
请注意造成差异的斜线。 文件夹的级别是我无法加载图像的原因。 我猜你也遇到了同样的问题
解决方案5
7 2018-04-26 21:11:59
我遇到了同样的问题。 如果您的图像在文件夹中，请尝试此操作
background-image: url(/resources/img/hero.jpg);
不要忘记将反斜杠放在第一个文件夹的前面。
解决方案6
4 2018-04-10 00:43:29
我想分享我的调试过程，因为我在这个问题上被困了至少一个小时。 运行本地主机时找不到图像。 为了添加一些上下文，我在以下目录中的 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 开发工具中的控制台中收到以下错误：
ActionController::RoutingError (No route matches [GET] "/images/header.jpg")
GET http://localhost:3000/images/header.jpg 404 (Not Found)
我尝试了网址的不同变体：
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 尝试在 localhost 上不起作用，或者我何时应该或不应该在 url 的开头添加句点。
它可能与如何在 application.html.erb 中设置默认链接标签有关，或者它可能是 .scss 与 .css 的事情。 或者，也许这就是带有 url() 的背景属性的工作方式（图像需要与 css 文件位于同一目录中）？ 无论如何，这就是我如何解决未在本地主机上加载 CSS 背景图像的问题。
解决方案7
3 2018-01-27 15:49:14
图像的路径应该是相对的，这意味着如果 css 文件在 css 文件夹中，那么您应该以../开始路径，例如
body{ background-image: url(../images/logo.jpg); }
这是因为您必须通过../路径返回主目录，然后返回图像文件的/images/logo.jpg路径。 如果您在 html 本身中包含 css 文件
body{ background-image: url(images/logo.jpg); }
解决方案8
2 2014-01-27 06:56:15
对我来说，以下行对我有用，我将它放在我身体的 css 中（其中图像位于我的 css 和 .html 文件所在的同一文件夹中）：
background: url('test.jpg');
您必须关心的另一件事是，注意图像扩展名，确保您的图像具有 .jpeg 或 .jpg 扩展名。 谢谢
解决方案9
1 2016-01-12 16:32:24
我发现问题是您不能为图像“img/image.jpg”使用短网址
你应该使用完整的 URL“ http://www.website.com/img/image.jpg ”，但我不知道为什么！！
解决方案10
1 2021-10-17 17:26:33
这是因为background: url('image.jpeg'); 在空白<div>不起作用，请在属于图像<div>的类中使用padding
body
{
background-image: url('nickcage.jpg');
padding: 30%;
font-family:
Georgia, "Times New Roman",
Times, serif;
color: red;
}
解决方案11
0 2016-05-10 07:21:39
我已经为我的 wamp-server-installed apache web 服务器更改了文档根目录。 所以使用相对 url ie (images/img.png) 不起作用。 我必须使用绝对网址才能使其工作，即
background-image:url(" http://localhost/project_x/images/img.png ");
解决方案12
0 2017-06-26 11:00:03
如果您将图像和 css 文件夹放在父目录中，假设资产那么以下代码可以完美运行。 双引号或没有双引号都可以正常工作。
body{ background: url("../image/bg.jpg"); }
在其他情况下，例如如果您调用类并尝试将背景图像放在特定位置，那么您还必须提及高度和宽度。
解决方案13
0 2021-05-30 08:28:24
在 Chrome 开发者工具中，您可以查看图像是否已加载。 查看检查和使用 css 样式选项卡。 如果图像在那里加载，那么你有一段时间没有添加 css
高度：500px；
图像的属性。
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 */
}
解决方案14
0 2021-08-09 07:45:57
就我而言，我使用双引号""而不是单引号''
const styling = {
// backgroundImage: `url('${backgroundSrc}')`, <------ HERE
backgroundRepeat: "no-repeat",
backgroundPosition: "center",
backgroundSize: "cover"
}
一些链接中的引号没有被转义，所以它们搞砸了。
使用双引号""代替。 像这样的backgroundImage: `url("${backgroundSrc}")`,
解决方案15
0 2021-10-19 12:48:23
就我而言，它最终成为具有 0px 高度和宽度的 div。 我调整了 div 的大小并看到了我的图像。
解决方案16
-1 2016-12-29 06:15:21
我遇到了同样的问题，在阅读本文后发现了问题，这是斜线。 Windows 路径：images\\green_cup.png
有效的 CSS：images/green_cup.png
图像\\green_cup.png 不起作用。
菲尔
解决方案17
-1 2017-03-13 11:00:32
以下代码对我有用，我将图像放在 somefolder/assets/img/background_some_img.jpg
background-image: url('../img/background_some_img.jpg');
background-size: cover;
background-repeat: no-repeat;
解决方案18
-1 2018-05-15 21:45:38
我可以在这里带来一些帮助......似乎当你使用 say background-image: url("/images/image.jpg"); 或背景图片： url("images/image.jpg"); 或背景图片： url("../images/image.jpg"); 不同的浏览器似乎对此有不同的看法。 第一个浏览器似乎将其视为 domain.com/images/image.jpg .... 第二个浏览器在 domain.com/css/images/image.jpg .... domain.com/PathToImageFile/image.jpg ... 希望这有帮助
图片背景未使用CSS加载
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.