CSS背景图像不显示

Posted 2023-02-23

【中文标题】CSS背景图像不显示

【英文标题】：CSS Background Image Not Displaying

【发布时间】：2012-12-11 08:15:21

【问题描述】：

我有一个 html 文件，其子目录名为 img，图像名为 debut_dark.png。在我的 CSS 文件中，我有：

body  
    background: url(/img/debut_dark.png) repeat 0 0;

HTML 文件具有 body 标记，并且包含适当的 CSS 文件。我确信 CSS 文件已正确包含，因为其他所有内容都已正确格式化。

没有显示背景图像，我只看到白色背景。任何想法如何解决这个问题，甚至如何调试它？

【问题讨论】：

检查图片 url 是否正确。打开开发者工具并查看网络选项卡，您的首发_dark.png 应该列在那里。检查它是否完全加载

你确定图片路径和名称吗？用firebug检查

如果你想调试一些东西（HTML/JS/CSS）——你总是可以打开一些适用于所有现代浏览器的开发工具（F12通常就足够了，但对于FF你可能需要安装萤火虫）。

图片好像没有加载。 img 子目录与 html 文件位于同一目录中。图片就在里面。我使用img/debut_dark.png 作为路径，但它不起作用。

导航到img/debut_dark.png的时候可以直接在浏览器中打开图片吗？

【参考方案1】：

根据你的 CSS 文件路径，我假设它与你的 HTML 页面在同一目录，你必须将 url 更改如下：

body  background: url(img/debut_dark.png) repeat 0 0; 

【讨论】：

我做了，但我仍然看到白色背景。

@Darksky 你的 CSS 文件在哪里？

知道了。路径必须相对于 CSS 文件（显然）。谢谢！

@darksky 或您的网络服务器文档根目录的绝对路径。

【参考方案2】：

确保你的身体有一个高度，f.ex：

body  
    background: url(/img/debut_dark.png) repeat;
    min-height: 100%;

【讨论】：

是的，这是关键。我有这样的代码，但没有用：.legaltech-procedure .legaltech-proc-details-left span.jp display: block; background-image: url("/images/flags/1x1/jp.svg"); background-repeat: no-repeat; background-size: 25px 25px; ，但后来我添加了min-width: 100%; min-height: 100%;，它显示了图像。

【参考方案3】：

你应该这样使用：

身体 背景： url("img/debut_dark.png") 重复 0 0; 身体 背景：url（“../img/debut_dark.png”）重复0 0； 身体 背景图像： url("../img/debut_dark.png") 重复 0 0;

或尝试使用 Firefox Firebug 工具检查 CSS 规则。

【讨论】：

我知道了。它必须是 url("../img/debut_dark.png")。我刚刚意识到路径必须相对于 CSS 文件而不是 HTML 文件（显然）。

好的。但是@Darksky 你标记了semsem 的正确答案。我解决了你的问题:(

【参考方案4】：

我在本地计算机上使用嵌入式 CSS。我将 atom.jpg 文件与我的 html 文件放在同一个文件夹中，然后这段代码就起作用了：

background-image:url(atom.jpg);

【讨论】：

这对我有用。当我尝试文件的完整路径时，它被阻止了。当我将副本放入工作文件夹时，它起作用了。得到背景图片。

【参考方案5】：

我也有同样的问题。但它对我来说很好用

background: url(../img/debut_dark.png) repeat

【讨论】：

对于以前的答案没有帮助的任何人，这个都有效。我遇到了同样的问题，因为在本地创建站点时，浏览器假定您从分区的根目录引用。在 URL 中添加两个点告诉浏览器该文件作为 index.html 文件位于根文件夹中。或者，添加整个路径。如“D:/path_to_image/image.jpg”

【参考方案6】：

我知道这并不能解决 OP 的确切情况，但对于来自 Google 的其他人，不要忘记根据元素类型尝试 display: block;。我在<i> 中有图片，但它没有出现...

【讨论】：

这对我有帮助:)

【参考方案7】：

基本上问题在于文件路径。 url 开头的正斜杠使它在根目录中查找文件。删除它，它将是一个相对于这个 css 文件的路径 - 像这样： background-image: url(img/debut_dark.png);

如果您使用的是 Atom，复制图像的项目路径有时会在复制的路径中包含正斜杠，所以要小心。

【讨论】：

不要破坏您的帖子。这可能会导致answer ban。通过在 Stack Exchange 网络上发布，您已授予 SE 分发该内容的不可撤销的权利（在 CC BY-SA 3.0 license 下）。根据 SE 政策，任何破坏行为都将被撤销。

【参考方案8】：

好吧，我发现这个属性会在提供完整位置时显示图像。我只是将该图像上传到我的服务器上并将该图像的位置链接到 background-image:url("xxxxx.xxx");属性，它终于起作用了，但是如果你们没有服务器，那么尝试通过进入该图像的属性来在属性中输入图像的完整位置。虽然我在 HTML 文件的标签中使用了这个属性，但它肯定也适用于 CSS 文件。如果该方法不起作用，请尝试将您的图像上传到互联网上，例如 behance、facebook、instagram 等，并检查图像并将该位置复制到您的属性中。希望这会奏效

【参考方案9】：

我遇到了同样的问题，在我删除重复 0 0 部分后，它解决了我的问题。

【参考方案10】：

body  
        background: url("../img/debut_dark.png") no-repeat center center fixed;
    

为我工作。

【参考方案11】：

拥有这些额外的属性总是好的

background-image:url('path') no-repeat 0 0;

为元素设置尺寸

宽度：x; 高度：y;

背景尺寸：100%

此属性有助于使图像适合您为元素定义的上述尺寸。

【参考方案12】：

您必须在 URL 中使用相对路径。我认为您在 index.html 所在的根目录中创建了两个文件夹。一个是“CSS”文件夹，另一个是“img”文件夹。

现在，如果您必须访问 css 文件中的“img”文件夹。因此，您必须使用“../”语法在根目录中返回一次。然后使用“../img”语法移动到“img”文件夹。然后写入图片名称“../img/debut_dark.png”。

body  
    background: url("../img/debut_dark.png") repeat 0 0;

【参考方案13】：

如果您的路径正确，那么我认为您的正文部分中没有任何元素。 只需定义主体的高度，您的代码就可以工作。

【参考方案14】：

我遇到了同样的问题。对我来说，它适用于：

  background: url("../img/green.jpg") no-repeat center bottom/cover;
  height: 100vh;

【参考方案15】：

background : url (/img.. )

注意：如果您的 css 位于不同的文件夹中，请确保图像路径以正斜杠开头。

它对我有用。 ！

【讨论】：

已经开发了大约 10 年 - 我花了很长时间才做到这一点哈哈

【参考方案16】：

如果您使用的是 vs 代码，请尝试使用 背景：url（“img/bimg.jpg”） 而不是背景：url（'img/bimg.jpg'） 我的工作 我没有用 "

替换 '

【讨论】：

欢迎来到 ***。虽然这种解释可能会解决问题，但包括如何以及为什么解决问题的示例代码将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。我建议您编辑您的答案以添加一些代码示例，看看这里 → How do I write a good answer? 谢谢！

【参考方案17】：

在这个问题中，我们将描述如何使用外部 css 进行图像调用

点赞：assets/images/laravelamit.jpg

然后你必须去 assets/css/style.css 并打开并放置

背景：url(../images/laravelamit.jpg);

【参考方案18】：

如果您在本地开发 检查您是否正在将 SCSS 处理为 CSS VSCode 中的实时 sass 编译器

【参考方案19】：

在您的html文件中的<link>标签内<link>标签的href内放一个点（。）在实际路径之前

如果样式表的路径是/css/style.css 那么参考如下

<link rel="stylesheet" href="./img/image.jpg">

然后在 .css 文件中

在图像存储的实际路径之前放一个双点（..）将是这样的

bodybackground-image : url("../img/image.jpg");

上述方法对我有用

【讨论】：

链接样式表图片代表什么？ developer.mozilla.org/en-US/docs/Web/HTML/Element/link

【参考方案20】：

您可以尝试使用!important 语法，它应该可以正常工作：

background: url(/img/debut_dark.png) repeat 0 0 !important;