Question

我想要<div>，其背景是图像。我定义宽度和高度但是当我使用 background-image 导入图像时，什么也没有出现！有什么问题？当然路径是正确的，因为它适用于<img>

＆＃13;

#slide-show{
  width: 1524px;
  height:300px;
  background-color: #808080;
  background-image: url("assets\files\project-pics\assets\harvard-university.jpg");

}

＆＃13;

这是整个代码（最后一个div将由图像背景化）

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>put.ac.ir::پرتال سایت</title>
<link rel="stylesheet" href="C:\Users\user\Desktop\font-awesome-4.7.0\css\font-awesome.css">
<style>
/* .........................things I should add to page....................*/
/* 1: href to top-menu links*/
/* ---------------------------------------------------------------*/
@font-face {
  font-family:'Btitr';
  src:url('font/BTitrBold.eot') format('eot'),
  url('font/BTitrBold.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
}
@font-face{
  font-family:"sahel";
  src:url('font/sahel.eot') format('eot'),
  url('font/sahel.ttf') format('truetype');
}
@font-face{
  font-family:'Bcompset';
  src: url('font/BCompset.eot')format('eot'),
  url('font/BCompset.ttf')format('truetype');
  font-weight:normal;
  font-style:normal;
}
body {
  margin :0;
  padding :0;
}
#header{
  margin:0;
  padding: 10px;
  height :20px;
  background-color: #4d4d4d;
  list-style-type: none;

}
li{
  color: white;
  display: inline-block;
}
#circle {
  text-align: center;
  width: 45px;
  height : 45px;
  border-radius: 50px;
  background-color: white;
  box-shadow: 1px 1px 2px 4px rgba(166, 166, 166, 0.3);
  position: fixed;
  right: 10px;
  bottom : 10px;
}
#header-logo {
  background-color:#800000;
  height : 250px;
}
#header-logo div img{
  height : 100px;
  width : 400px;
  padding-left: 550px;
  padding-top:60px;
}
#top-menu{
  font-family :sahel;
  list-style-type:none;
}
#top-menu li{
  color:#cccccc;
  padding-top: 30px;
  padding-left:25px;
  font-size : 13.5px;
}
#slide-show{
  width: 1524px;
  height:300px;
  background-color: #808080;
  background-image: url("assets\files\project-pics\assets\harvard-university.jpg");

}









/* ---------------------------------------------------------------------------*/
</style>
</head>
<body>
  <a name="top"></a>
  <ul id="header">
    <a href="https://www.google.com/"><li class="fa fa-search" style="color:white;"></li></a>
    <a href="https://www.google.com/"><li style="padding-left:10px; font-family:tahoma; font-size:15px;"> ...جستجو نکنید </li></a>
    <li style="font-family:tahoma; padding-left:350px;">شنبه خر است</li>
    <li style="padding-left:200px; font-family:tahoma; font-size:16;">اقتصاد مقاومتی ، اقدام و عمل</li>
    <li style ="padding-left:400px; color:#cccccc;">[lori] [torki]</li>
  </ul>

<a href="#top" style="color:#000;"><div id="circle"><i class="fa fa-angle-up" style="font-size:40px;"></i></div></a>

<!logo and top of the main page >
<div  id="header-logo">
  <div>
    <img src="project-pics/assets/header-logo.png"/>
  </div>
  <div>
    <ul id="top-menu" title="comming soon">
      <a><li style="padding-left:295px;"> دانشگاه TER سامانه</li></a>
      <a><li>داعش کده ها</li></a>
      <a><li>معاونت حمل و نقل با گاری</li></a>
      <a><li>معاونت دانشجوهای کلنگی</li></a>
      <a><li>معاونت آمرزشی</li></a>
      <a><li>موزه فراست</li></a>
    </ul>
  </div>
  <! slide show of the page>
</div>
<div id="slide-show">

</div>



</body>
</html>

＆＃13;

好的！它是图像中的路径

enter image description here

Answer 1

您的网址中没有空格。

background-image: url("project assets\files\project-pics\assets\harvard-university.jpg");

使用%20或将该文件夹重命名为-或_。

Answer 2

#slide-show{
  width: 1524px;
  height:300px;
  background-color: #808080;
  background-image: url("projectassets\files\project-pics\assets\harvard-university.jpg");
}

使用上面的代码。将文件夹项目资产重命名为projectassets。您的网址路径中不能有空格。另外，在高度减速结束时你也没有分号。您尚未为宽度声明定义单位，请使用px，％，em等有效单位来定义宽度。

为什么背景图片不能在我的id选择器中工作？

2 个答案: