Question

我正试图复制网页模板，其目的仅仅是为了更加熟悉HTML / CSS的作品。我想将文档中的图像用作DIV的背景，但是由于某些奇怪的原因，它不会导入。请记住，我还是编码新手。

我从Google那里抽了一个随机的照片地址作为测试，这是可行的。所以，我在想我的照片是否位于错误的文件夹中（与我从中调用的文档位于相同的文件夹中），或者我的代码中有其他内容与所调用的图像/文件冲突。不过，我仍然不确定。

HTML文件：

<html>
  <head>
    <title>conquer</title>
    <link rel="stylesheet" type="text/css" href="conquer.css" />
  </head>
  <body>

    <div class="navbar">
        <a href="">Homepage</a>
        <a href="">About Us</a>
        <a href="">Services</a> 
        <a href="">Contact</a>
        <a href="">External</a>
    </div>

    <div class="topbanner"></div>

  </body>
</html>

CSS文件：


body {
    background-color: #fff;
    margin: 0;
}

/** Navigation Bar **/

.navbar {
    background-color: #383E4C;
    height: 100px;
    width: 100%;
    position: fixed;
    text-align: center;
    margin-top: 0px;
}

.navbar a {
    color: #F6F6F7;
    text-decoration: none;
    font-size: 22px;
    font-family: "Helvetica", sans-serif;
    border: 1px solid #646D7C;
    padding: 15px;
    margin-top: 20px;
    margin-right: 20px;
    display:inline-block;
}

.navbar a:hover {
    background-color: #49505F;
}

/** Top Banner **/

.topbanner {
    height: 500px;
    width: 300px;
    background-image: url('/city.jpg');
    background-repeat: no-repeat;
}

我希望图像显示在DIV中，但是当我打开控制台元素时，它只是一个巨大的看不见的块。

Answer 1

在路径中，斜杠/告诉浏览器转到ROOT文件夹。

所以您将要更改此内容：

background-image: url('/city.jpg');

到

background-image: url('city.jpg');

为什么我的图像不能从文件传输到DIV的样式表中？

1 个答案: