请问我的banner背景图为什么出不来
来源：2-10 作业题
weixin_慕斯卡3305140
2020-03-03 07:14:20
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Career Builder</title>
<link rel="stylesheet" href="css/CareerBuilder.css">
</head>
<body>
<header>
<img src="images/logo.png" alt="logo">
<nav>
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">GALLERY</a>
<a href="#">FACULTY</a>
<a href="#">EVENTS</a>
<a href="#">CONTACT</a>
</nav>
</header>
<section class="banner">
<div class="shade"></div>
<form action="ememem">
<input type="text" placeholder="your Name"><br>
<input type="tel" placeholder="your Phone"><br>
<input type="email" placeholder="your Email"><br>
<input type="submit" value="SEND MESSAGE" class="btn"><br>
</form>
</section>
<section class="about">
<div class="uper">
<h3 class="title">about</h3>
<p class="bar">——</p>
<p class="dis">Lorem Ipsum is a simply dummy text of the painting and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<div class="aboutDis">
<h4 class="subtitle">A WORD <br>ABOUT US</h4>
<div class="left">
<p>Praesent digmissim viverra est, sed bibendum ligula conger non. This is not English at all. Are you kidding me? I will just type something here.</p>
<button class="explore">EXPLORE</button>
<div class="right">
<h4>70000</h4>
<p class="bar">——</p>
Students
</div class="right">
<div>
<h4>600</h4>
<p class="bar">——</p>
Faculty
</div>
</div>
</div>
</div>
<div class="lower">
<dl>
<dt>Library</dt>
<dd><img src="images/lib.jpg" ></dd>
<dd>
<p>Lorem Ipsum is a simply dummy text of the painting and typesetting industry.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</p>
</dd>
<button class="explore">EXPLORE</button>
</dl>
<dl>
<dt>Computer Lab</dt>
<dd><img src="images/computer.jpg" ></dd>
<dd>
<p>Lorem Ipsum is a simply dummy text of the painting and typesetting industry. </p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</p>
</dd>
<button class="explore">EXPLORE</button>
</dl>
<dl>
<dt>Confrence Hall</dt>
<dd><img src="images/hall.jpg" ></dd>
<dd>
<p>Lorem Ipsum is a simply dummy text of the painting and typesetting industry. </p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</p>
</dd>
<button class="explore">EXPLORE</button>
</dl>
<dl>
<dt>Play Ground</dt>
<dd><img src="images/play.jpg" ></dd>
<dd>
<p>Lorem Ipsum is a simply dummy text of the painting and typesetting industry. </p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gallery of type and scrambled it to make a type specimen book.</p>
</dd>
<button class="explore">EXPLORE</button>
</dl>
</div>
</section>
<section class="gallery"></section>
<h3 class="title">GALLERY</h3>
<p class="bar">——</p>
<p class="dis">Lorem Ipsum is a simply dummy text of the painting and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<div class=galPic>
<img src="images/gallery-01.jpg">
<p>SIENCE LAB</p>
</div>
<div class=galPic>
<img src="images/gallery-02.jpg">
<p>INDOOR STADIUM </p>
</div>
<div class=galPic>
<img src="images/gallery-03.jpg">
<p>TRANSPORTATION</p>
</div>
<div class=galPic>
<img src="images/gallery-04.jpg">
<p>KIDS ROOM</p>
</div>
<div class=galPic>
<img src="images/gallery-05.jpg">
<p>MEDITATION CLASSES</p>
</div>
<div class=galPic>
<img src="images/gallery-06.jpg">
<p>KIDS PAYGROUND</p>
</div>
<footer>
<span>© 2016 imooc.com 京ICP备13046642号</span>
</footer>
</body>
</html>
4回答
-
同学你好， 可能是由于引入背景图片地址不对，导致图片没有显示。建议：同学查看下图片引入地址是否正确。
可以试试如下写法
可以找到控制台的console。查看对应的报错信息，如下示例：报错就是找不到对应的图片。
如果还有疑惑，可以将你的项目目录粘贴过来，便于帮助同学准确的定位与解决问题。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0h020-03-03 -
weixin_慕斯卡3305140
提问者
2020-03-03
0 -
weixin_慕斯卡3305140
提问者
2020-03-03
还有这个地方显示有一个错误怎么定位出来知道哪里错了
0 -
weixin_慕斯卡3305140
提问者
2020-03-03
/*all*/
*{padding:0; margin: 0; font-family: Arial;}
a{text-decoration: none;}
/*header*/
header{
height: 80px;
background: #07cbc9;
min-width: 1280px;
}
header img{
float: left;
height: 70px;
padding: 5px 0 5px 100px;
}
header nav{
float: right;
padding-right: 100px;
}
header nav a{
height: 80px;
float: left;
line-height: 80px;
padding: 0 10px;
color: #fff;
font-weight: bold;
}
/*banner*/
.banner{
height: 300px;
background-image:url("images/hall.jpg") ;
background-size: 50%;
background-position: center;
}
/*about*/
/*gallery*/
/*footer*/
0
相似问题