logo标签列表

CSS背景图片无法显示

htmlcsspathbackground-image
51

我有一个带有名为img的子目录和一张名为debut_dark.png的图片的HTML文件。在我的CSS文件中，我有：

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

HTML文件具有body标签，并适当地包含了CSS文件。我确定CSS文件已经正确引用，因为其他所有内容都被正确格式化了。

背景图片未能显示出来，我只看到了白色背景。有什么想法可以解决这个问题，或者如何进行调试？

2
检查图片 URL 是否正确。打开开发者工具并查看网络选项卡，你的 debut_dark.png 应该在其中列出。检查它是否已经被加载。 - Viktor S.
3
确定图片路径和名称是否正确？使用Firebug进行检查。 - midstack
看起来图片没有加载。img子目录与html文件在同一个目录中。图片就在那里。我使用img/debut_dark.png作为路径，但它不起作用。 - darksky
@Darksky，你尝试过使用一些开发工具吗？另外，你的HTML文件路径是什么（这很重要）？ - Viktor S.
1
当导航到img/debut_dark.png时，您能否直接在浏览器中打开图像？ - David Hellsing
显示剩余3条评论
21个回答
33
根据你的CSS文件路径，我假设它与你的HTML页面在同一目录中，你需要将url更改为以下内容：
body { background: url(img/debut_dark.png) repeat 0 0; }
2
我已经尝试了，但仍然看到白色的背景。 - darksky
@Darksky，你的CSS文件在哪里？ - SaidbakR
38
明白了，路径必须相对于 CSS 文件（显然）。谢谢！ - darksky
@darksky或者是你的Web服务器文档根目录的绝对路径。 - SaidbakR
在我的情况下，我已经将背景颜色设置为白色。请移除背景颜色，然后添加您的图像。 - Robin Chauhan
21
你应该像这样使用： 
        body { 
            background: url("img/debut_dark.png") 0 0 repeat;
        }
body { 
            background: url("../img/debut_dark.png") 0 0 repeat;
        }
body { 
            background-image: url("../img/debut_dark.png");
            background-repeat: repeat;
            background-position: 0 0;
        }
或尝试使用Firefox Firebug工具检查CSS规则。
2
我明白了。路径应该是url("../img/debut_dark.png")。我刚意识到路径应该相对于CSS文件而不是HTML文件（显然）。 - darksky
好的。但是@Darksky你把正确答案标记给了semsem。我解决了你的问题 :( - Surinder ツ
11
我知道这并不是针对楼主的确切情况，但对于从Google找到这里的其他人，请不要忘记尝试根据元素类型设置 display: block;。我在一个标签中放置了图片，但它没有出现...
3
这帮助了我 :) - Tim Givois
7

请确保您的HTML标签中有height属性，例如：

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%; 就显示了图像。 - Jacques
5

我有同样的问题。但对我来说它可以正常工作。

background: url(../img/debut_dark.png) repeat
对于之前的回答没有帮助的任何人，这个方法是有效的。我也遇到了同样的问题，因为在本地创建网站时，浏览器会认为你是从分区的根目录引用文件。在URL中添加两个点告诉浏览器该文件位于根文件夹中，就像index.html文件一样。或者，可以添加整个路径，例如“D:/path_to_image/image.jpg”。 - Kenneth Murerwa
4

我也遇到了同样的问题。对于我而言，以下方法可行：

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

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

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

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

除了
background-image:url('path') no-repeat 0 0;之外，拥有这些额外的属性总是很好的。

  1. 将尺寸设置为元素

    width:x; height:y;

  2. background-size:100%

    • 此属性有助于将图像调整到您为元素定义的上述尺寸。
2
body { 
        background: url("../img/debut_dark.png") no-repeat center center fixed;
    }
< p > 对我有用。 < /p >
2
在你的html文件中的<link>标签内，在<link>标签的href属性中，将实际路径前加一个点(.)。请注意保留HTML标签。
如果样式表的路径是/css/style.css，则引用如下：
<link rel="stylesheet" href="/css/style.css">

然后在 .css 文件中

在实际路径之前放置双点(..)，就像这样

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

上述方法对我有效。
“link stylesheet image”代表什么意思？https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link - Michal Miky Jankovský
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接