将文件导入 CSS 文档不起作用答案

【问题标题】：Import File to CSS Document Not Working将文件导入 CSS 文档不起作用
【发布时间】：2016-06-18 23:51:23
【问题描述】：

我正在尝试导入一张我想用作我当前正在构建的网站的标题的图片。我想将 .png 图像导入 CSS 文件。我已经进行了广泛的研究，试图找出我目前遇到的问题。文件路径是正确的，一切都拼写正确（字面意思是四重检查，也许更多），我仍然有问题。我尝试将“..”放在路径前面，但无济于事。图片将用作网站顶部的横幅。这是我所有的代码。有点刚开始这个网站，所以没有很多。

HTML：

<!DOCTYPE HTML>

<html>

<head>
<title>Bludmon88-NAVBAR</title>
<link rel = "stylesheet" type = "text/css" href = "Styles.css">
<ul class = "navigation">
<li><a href = "index.html">Home</a>
<li><a href = "index.html">Home</a>
<li><a href = "index.html">Home</a>
<li><a href = "index.html">Home</a>
</ul>
</div>
<div class = "banner">
<div class = "title">

</div>
</div>
</head>

<body>

</body>
</html>

CSS：

.navigation a, li{
list-style:none;
display:inline-block;
float:left;
padding:3px 50px 1px 0px;
text-decoration:none;
font-size:20px;
}
.banner {
background-image: url('/F:/Bludmon88/Pics/Banner.png'); 

}

P.S 对 HTML 和 CSS 不是非常了解，但掌握了基础知识，如果您提出其他语言，我将不知道您在说什么，所以...是的。谢谢！

【问题讨论】：

我认为你需要避免使用绝对路径，你需要使用像/Pics/Banner.png这样的相对路径
进行测试，将您的路径（例如localhost/Bludmon88/Pics/Banner.png）插入浏览器并查看图片是否存在。如果是这样，请将该链接指向您的 CSS。测试你的页面。然后使链接相对删除 http: 和矛 /

标签： html css image file path

【解决方案1】：

您应该在主文件夹中创建一个“图像”文件夹，并将该横幅图像保存在其中。然后设置后台 url 以在您的本地站点和服务器中正常工作：

.banner {
  background-image: url('images/Banner.png'); 
}

【讨论】：

【解决方案2】：

如果您不提及高度或 div 中没有内容，则不会显示背景图像。添加波纹管css然后它将显示

。横幅 { 背景图片: url('http://tse1.mm.bing.net/th?id=OIP.M831bc7403efb71bfe938858406d2d01cH0&pid=15.1'); 高度：300px；宽度：100%； }

【讨论】：