为何在css中背景图像不显示?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (120)

我无法通过CSS显示任何图像。如果我直接将它添加到带有IMG标记的HTML中,它将正常工作。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style/main.css" />
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <img src="images/logo.png" alt="Logo"> <!-- Works -->
            </div>
        </header>
    </div>
    <footer></footer>    
</body>
</html>

CSS:

.logo {
/* Doesn't work */
background-image: url("/images/logo.png");

}

提问于
用户回答回答于

你应该检查项目的文件夹结构。

|_project
  |_index.html
  |_css
  |  |_style.css
  |_js
  |  |_script.js
  |_images
     |_bg.jpg

在Project文件夹中:你可以通过输入

images/bg.jpg

因为index和图像文件夹都在同一级别。

在CSS或js文件夹中“:你可以通过输入

../images/bg.jpg

因为它们的级别不同,所以../意味着SETP回一级,所以它把我们从css folderproject folder,然后是图像文件夹,这样我们就可以轻松地访问它了。

扫码关注云+社区

领取腾讯云代金券