外部CSS背景-图像未显示

Question

我在外部CSS文件中的背景图像属性有问题。我似乎没办法让这张照片出现。这是一段时间以来，我已经编码，所以可能只是我忘记了我知道的一切，但我非常肯定，我有正确的链接。这个网站是这样建立的

/Root/
   index.html
   /styles/
      webstyles.css
      /img/
         header.jpg

当我在线使用它的时候，背景就会起作用，所以它开始让我恼火了。

HTML

<html>
    <head>
        <meta charset="UTF-8">
        <title>MYSITE</title>
        <link rel="stylesheet" type="text/css" href="/styles/webstyles.css">
    </head>
    <body>
        <div class="headerBar">
            <h1 class="Hlogo">Title</h1>
        </div>
    </body>
</html>

CSS

body
{
    background:#999999;
}
headerBar
{
    background: url(/styles/img/header.jpg);
}

谢谢你的帮助。

Answer 1

如果这种样式是在webstyles.css中，那么您需要使用这种方式。

.headerBar{
    background: url('img/header.jpg');
}

基于文件夹结构，"styles/img/header.jpg"仍然是一个错误的路径。

而且，我也不知道为什么，但是您在选择CSS类选择器时缺少了.。把那个也修好。

Answer 2

您可以使用：

background: url("styles/img/header.jpg");

Answer 3

您可以使用：

.headerBar
{
    background: url("styles/img/header.jpg");
}

因为styles文件夹与您的HTML的级别相同。

但是，如果您的img文件夹没有放置在styles文件夹中(这更有意义)，那么您需要的是这个路径：

.headerBar
{
    background: url('img/header.jpg');
}

另外，您还缺少了目标类. .headerBar