Question

外部CSS文件中的background-image属性存在问题。我似乎无法让图像显示出来。自从我编码以来已经有一段时间了，也许只是我忘记了我所知道的一切，但我很确定我的链接正确。该网站设置如下

/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

您可以使用：

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

Answer 2

如果此样式位于webstyles.css，则需要使用此方式。

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

根据文件夹结构，"styles/img/header.jpg"仍然是错误的路径。

而且，我不确定原因，但在选择.时，您缺少headerBar CSS类选择器。修复那个。

Answer 3

您可以使用：

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

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

但是，如果您的img文件夹未放在styles文件夹中（这更有意义），那么您需要此路径：

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

此外，您还缺少.来定位课程.headerBar

Answer 4

替换

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

与

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

外部CSS背景图像未显示

4 个答案: