45

我有一个 HTML 文件，其中img包含一个名为debut_dark.png. 在我的 CSS 文件中，我有：

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

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

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

4

20 回答 20

27

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

body { background: url(img/debut_dark.png) repeat 0 0; }
于 2012-12-25T09:19:38.510 回答
17

你应该这样使用：

        身体 {
            背景：url（“img/debut_dark.png”）重复0 0；
        }

        身体 {
            背景：url（“../img/debut_dark.png”）重复0 0；
        }

        身体 {
            背景图像： url("../img/debut_dark.png") 重复 0 0;
        }

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

于 2012-12-25T09:21:16.570 回答
9

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

于 2016-05-11T17:57:15.467 回答
6

确保你的身体有一个高度，例如：

body { 
    background: url(/img/debut_dark.png) repeat;
    min-height: 100%;
}
于 2012-12-25T09:21:03.000 回答
5

我有同样的问题。但它适用于我

background: url(../img/debut_dark.png) repeat
于 2015-10-12T05:25:13.533 回答
3

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

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

body { 
    background: url("../img/debut_dark.png") repeat 0 0;
}
于 2018-08-22T11:08:16.027 回答
2 
body { 
        background: url("../img/debut_dark.png") no-repeat center center fixed;
    }

为我工作。

于 2018-04-19T12:15:49.660 回答
2

除了

背景图像：url（'path'）不重复0 0；

  1. 为元素设置维度

    宽度：x；高度：y；

  2. 背景大小：100%

    • 此属性有助于使图像适合您为元素定义的上述尺寸。
于 2018-05-12T15:33:25.060 回答
2

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

  background: url("../img/green.jpg") no-repeat center bottom/cover;
  height: 100vh;
于 2019-05-22T02:40:03.557 回答
1

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

background-image:url(atom.jpg);
于 2014-01-20T20:57:03.343 回答
1 
background : url (/img.. )

注意：如果您的 css 在不同的文件夹中，请确保使用正斜杠开始图像路径。

它对我有用。！

于 2020-09-13T14:07:17.820 回答
0

<link>html 文件中的内部标签 内部标签的 href<link>在实际路径之前放置一个点 (.)

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

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

然后在 .css 文件中

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

body{background-image : url("../img/image.jpg");}

上述方法对我有用

于 2021-10-25T13:23:52.397 回答
0

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

喜欢：资产/图像/laravelamit.jpg

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

背景：网址（../images/laravelamit.jpg）；

于 2021-04-02T06:23:53.207 回答
0

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

于 2018-01-19T07:53:54.760 回答
0

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

于 2018-04-04T13:44:58.727 回答
0

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

于 2019-04-24T10:36:01.813 回答
0

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

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

于 2021-11-27T22:15:37.730 回答
0

如果你在本地开发检查你是否在 VSCode 中处理 SCSS 到 CSS Live sass 编译器

于 2021-07-07T05:46:44.940 回答
-1

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

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

于 2018-01-05T15:52:15.740 回答
-1

如果您使用的是 vs 代码，请尝试使用 background:url("img/bimg.jpg") 而不是 background:url('img/bimg.jpg') 我的工作没有什么我用 " 替换了 '

于 2021-01-13T11:08:15.967 回答