CSS背景图像未加载

Posted 2023-03-05

技术标签:

【中文标题】CSS背景图像未加载【英文标题】：CSS Background image not loading 【发布时间】：2014-02-17 22:02:11 【问题描述】：

我遵循了所有的教程，这些教程都是说的。我在我的 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;

【问题讨论】：

你的图片放在哪里了？哪个文件夹？ “图像”文件夹？如果你尝试过 jsfiddle？请检查您的图片扩展... 尝试 [CTRL] + [F5] 在浏览器中硬刷新页面。也许这只是一个缓存问题。就像 Nikhil 说的：一般搜索错别字;) 做 1 件事..在 chrome 中创建一个Inspect element，选择body tag 然后单击body 样式中的img....它是否打开？那是浏览器的缓存问题...！ 【参考方案1】：

这是另一个图像 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;

【讨论】：

好的，你的工作，但我曾尝试过在线网址的图像路径，但之前没有工作。你能想出一个为什么这个特别有效，而其他的无效的原因吗？可能浏览器缓存（按 ctrl+f5）或图片扩展问题...请检查两个大小写。它会没事的【参考方案2】：

首先，向那些名言挥手告别：

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

希望对你有帮助。

【讨论】：

我最初在引号之外有它，但它不起作用。刚刚又试了一次；没用。使用单引号只会在 IE/Mac 上造成问题，甚至无法在现代 Mac 上运行。行情对我来说没有问题。引号大部分是可选的；在处理特殊字符和空格时，引号变得必要。引号不是问题，只是不必要的麻烦/无用的字节/潜在的拼写错误。这些点适用于 css background-image: url()。带有文件系统`Index.html\css\stylesheet.css`和index.html\images\image.png【参考方案3】：

对我来说，以下行对我有用，我把它放在我身体的 css 中（其中图像在我的 css 和 .html 文件所在的同一文件夹中）：

background: url('test.jpg');

您必须关心的另一件事是，请注意图片扩展名，确保您的图片具有 .jpeg 或 .jpg 扩展名。谢谢

【讨论】：

【参考方案4】：

试试这个

background-image: url("/yourimagefolder/yourimage.jpg");

我在使用background-image: url("yourimagefolder/yourimage.jpg");时遇到了同样的问题

请注意造成差异的斜线。文件夹的级别是我无法加载图像的原因。我猜你也遇到了同样的问题

【讨论】：

如果您可以编辑您的答案并解释您显示的代码的作用，以及该代码为何/如何回答问题，它真的很有帮助。【参考方案5】：

我发现问题是您不能为图片“img/image.jpg”使用短网址

你应该使用完整的 URL “http://www.website.com/img/image.jpg”，但我不知道为什么！！

【讨论】：

你不需要这样做。相对路径很好。【参考方案6】：

我已经更改了安装 wamp-server 的 apache web 服务器的文档根目录。所以使用相对 url 即 (images/img.png) 不起作用。我必须使用绝对网址才能使其正常工作，即

背景图片:url("http://localhost/project_x/images/img.png");

【讨论】：

【参考方案7】：

我遇到了同样的问题。问题最终成为图像文件的路径。确保图像路径是相对于 CSS 文件的位置而不是 HTML。

【讨论】：

【参考方案8】：

我遇到了同样的问题，在阅读后发现问题，是斜线。窗口路径：图片\green_cup.png

有效的 CSS：图片/green_cup.png

images\green_cup.png 不起作用。

菲尔

【讨论】：

【参考方案9】：

以下代码对我有用，我将图像放置在 somefolder/assets/img/background_some_img.jpg 中

background-image: url('../img/background_some_img.jpg');
background-size: cover;
background-repeat: no-repeat;

【讨论】：

【参考方案10】：

如果您将图像和 css 文件夹放在父目录中，假设资产，那么以下代码可以完美运行。双引号或没有双引号都可以正常工作。

body
   background: url("../image/bg.jpg");

在其他情况下，例如，如果您调用一个类并尝试将背景图像放在特定位置，那么您还必须提及高度和宽度。

【讨论】：

【参考方案11】：

图像的路径应该是相对的，这意味着如果 css 文件在 css 文件夹中，则应该以 ../ 开头，例如

body
   background-image: url(../images/logo.jpg);

这是因为您必须通过 ../ 路径返回主目录，然后通过图像文件的 /images/logo.jpg 路径返回主目录。如果您在 html 本身中包含 css 文件

body
   background-image: url(images/logo.jpg);

这段代码可以正常工作。

【讨论】：

【参考方案12】：

我想分享我的调试过程，因为我被这个问题困扰了至少一个小时。运行本地主机时找不到图像。为了添加一些上下文，我在以下目录中的 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 变体：

url('../images/header.jpg') # DID NOT WORK
url('/../images/header.jpg') # DID NOT WORK
url('./../images/header.jpg') # DID NOT WORK

它仍然没有工作。那时，我很困惑……我决定将图片文件夹从 assets 目录（这是默认目录）移动到 stylesheets 目录中，并尝试了以下 url 的变体：

url('/images/header.jpg') # DID NOT WORK
url('./images/header.jpg') # WORKED
url('images/header.jpg') # WORKED

我不再收到控制台和 Rails 服务器错误。但是由于某种原因，图像仍然没有显示。暂时放弃后，我发现解决这个问题的方法是添加一个 height 属性以便显示图像...

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 上不起作用，或者我什么时候应该或不应该在开头添加句点网址。

这可能与如何在 application.html.erb 中设置默认链接标签有关，或者它可能是 .scss 与 .css 的事情。或者，也许这就是带有 url() 的背景属性的工作方式（图像需要与 css 文件位于同一目录中）？无论如何，这就是我解决 CSS 背景图像未在 localhost 上加载的问题的方法。

【讨论】：

【参考方案13】：

我遇到了同样的问题。如果您在文件夹中有图像，请尝试此操作

background-image: url(/resources/img/hero.jpg);

不要忘记将反斜杠放在第一个文件夹的前面。

【讨论】：

【参考方案14】：

我可以在这里带来一点帮助......似乎当你使用 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...希望这会有所帮助

【讨论】：

您自己尝试过吗？抱歉，我认为您的解决方案不准确。使用谷歌开发者工具自己尝试，检查...您可以将鼠标悬停在 ("../images/image.jpg") 链接上，它会为您提供 url 名称...试用错误告诉我发生了什么。对不起你是正确的第一个和第二个被切换了......“images/images.jpg”被视为/css/images/image.jpg和“/images/images.jpg”只是/images/image.jpg... 对不起【参考方案15】：

在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 */

【讨论】：

【参考方案16】：

在我的例子中，我使用双引号 "" 而不是单引号 ''

  const styling =                 
//      backgroundImage: `url('$backgroundSrc')`,  <------ HERE
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
        backgroundSize: "cover"

一些链接中的引号没有被转义，所以它们搞砸了。

请改用双引号 ""。像这样 backgroundImage: `url("$backgroundSrc")`,

【讨论】：

【参考方案17】：

这是因为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;

【讨论】：

【参考方案18】：

在我的例子中，它最终成为具有 0px 高度和宽度的 div。我调整了 div 的大小并看到了我的图像。

【讨论】：

以上是关于CSS背景图像未加载的主要内容，如果未能解决你的问题，请参考以下文章

CSS 背景图像未显示 CSS HAML

WordPress CSS背景图像未出现

图像预加载技术（用作悬停状态 CSS 背景图像）似乎不适用于 Chrome

背景图像未与 s-s-rS 中的气泡图对齐

未捕获的类型错误：无法设置未定义的属性“背景”

雪碧图技术