Question

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

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

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

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

Answer 1

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

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

Answer 2

你应该这样使用：


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

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

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

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

Answer 3

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

Answer 4

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

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

Answer 5

我有同样的问题。但它对我来说很合适

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

Answer 6

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

为我工作。

Answer 7

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

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

Answer 8

除了

之外，还有其他属性

background-image：url（'path'）no-repeat 0 0;

将尺寸设置为元素

宽度：X; 高度为：y;
背景尺寸：100％
- 此属性有助于使图像适合您为元素定义的上述维度。

Answer 9

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

Answer 10

我确定这个属性在显示完整位置时显示图像。我只是将该图像上传到我的服务器上，并将该图像的位置链接到background-image：url（＆＃34; xxxxx.xxx＆＃34;）;属性，它最终工作，但如果你们没有服务器然后尝试通过进入该图像的属性输入属性中的图像的完整位置。虽然我在HTML文件的标签中使用了这个属性，但它肯定也适用于CSS文件。如果该方法不起作用，那么尝试在互联网上上传您的图像，如behance，facebook，instagram等，并检查图像并将该位置复制到您的属性..希望这将起作用

Answer 11

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

background-image:url(atom.jpg);

Answer 12

如果您的路径正确，那么我认为您的正文部分没有任何内容。只需定义身体的高度，您的代码即可使用。

Answer 13

我有同样的问题。对我来说，它与：

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

Answer 14

background : url (/img.. )

注意：如果您的CSS位于其他文件夹中，请确保使用FORWARD SLASH开始映像路径。

对我有用。！

Answer 15

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

喜欢：assets/images/laravelamit.jpg

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

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

Answer 16

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

Answer 17

基本上问题在于文件路径。 url开头的正斜杠使它在根目录中查找文件。删除它，它将是一个相对于此css文件的路径 - 像这样： line_length = 80 passed = ' OK' failed = ' FAILED' def get_print_string(msg_to_print, suffix): leftover_length = line_length - (len(msg_to_print) + len(suffix)) if leftover_length > 0: msg_to_print = msg_to_print + "." * (leftover_length - 3) + suffix return msg_to_print # Test code print(get_print_string('test_integer_to_month', passed)) print(get_print_string('test_month_to_integer', passed)) print(get_print_string('test_abbreviated_int_to_month', failed)) print(get_print_string('test_days_in_month', passed))

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

Answer 18

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

替换了 '

CSS背景图像不显示

18 个答案: