background-image图片不显示问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<link rel="stylesheet" type="text/css" href="css/Carousel.css">
		<link rel="stylesheet" type="text/js" href="css/Carousel.js">
	</head>
	<body>
		<div class="container">
			<div class="nav">
				<ul>
					<li>首页</li>
					<li>点击查看</li>
					<li>会自动的</li>
					<li>我的网站</li>
				</ul>
			</div>
			<div class="banner">
				<a href="">
					<div class="pic-one"></div>
				</a>
				<a href="">
					<div class="pic-two"></div>
				</a>
				<a href="">
					<div class="pic-three"></div>
				</a>
				<a href="">
					<div class="pic-four"></div>
				</a>
			</div>
		</div>
	</body>
</html>

*{
	padding:0;
	margin:0;
}
.container{
	width:1000px;
	height:600px;
	margin:0 auto;
	border:1px solid black;
}
.nav{
	width:1000px;
	height:50px;
	font-size: 30px;
}
.banner{
	width:1000px;
	height:550px;
}
li{
	display: inline-block;
}
.pic-one{
	background-image:url(../img/1.jpg) no-repeat;
}
.pic-two{
	background-image:url(../img/3.jpg) no-repeat;
}
.pic-three{
	background-image:url(../img/4.jpg) no-repeat;
}
.pic-four{
	background-image:url(../img/5.jpg) no-repeat;
}

老师老师，为什么图片显示不出来呀，路径没有错呀

天上掉下个小馅饼 2018-04-07

源自：项目：JS实现轮播特效 6-2 作业题

收起

2回答

慕神8145773 回答被采纳获得+3积分 2018-04-08 11:07:03

1.如下图所示：你的书写方式不正确：

正确书写方式应该是：background:url(‘../img/1.jpg’) no-repeat;

2.需要给设置背景图片的div指定height

收起回答

天上掉下个小馅饼提问者 #1

大佬大佬，为什么不行呀

2018-04-08 13:06:08
天上掉下个小馅饼提问者 #2

是因为我加了个no-repeat吗

2018-04-08 13:06:50
卡布琦诺回复提问者天上掉下个小馅饼 #3

background-image后面只能写url链接图片，你可以设置其他的属性值，因为background-image是定义背景图片的。background是既可以定义图片也可以定义是否重复平铺。因此建议你按照上面同学给出的建议，修改成background:url(‘../img/1.jpg’) no-repeat;然后是设置一下高度，没有高度也是不显示的哦~

2018-04-08 15:47:49