为什么使用background-image: url()；不能显示图片？

首页课程实战体系课手记专栏慕课教程

来源：2-3 轮播图上按钮样式

暗淡冬天

2019-06-04 14:59:04

写回答

3回答

好帮手慕柯南

2019-06-04

已采纳

同学你好！

出现这样的原因是因为background-image: url()；和background: url()；对图片设置不重复，居中的方式不同，只写background-image是可以显示的
使用background-image应该通过以下方式来设置不重复以及居中

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

暗淡冬天

提问者

2019-06-04

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>轮播图</title>
	<link rel="stylesheet" type="text/css" href="css/rotation.css">
</head>
<body>
<div class="main">
	<!-- 图片轮播 -->
	<div class="banner">
		<a href="">
			<div class="banner-slide slide1 slide-active"></div>
		</a>
		<a href="">
			<div class="banner-slide slide2"></div>
		</a>
		<a href="">
			<div class="banner-slide slide3"></div>
		</a>
	</div>
	<!-- 上一张、下一张轮播按钮 -->
	<a href="javascript:void(0)" class="button prev"></a>
	<a href="javascript:void(0)" class="button next"></a>
</div>
</body>
</html>

*{
	margin: 0px;
	padding: 0px;
}

ul{
	list-style-type: none;
}

a{
	text-decoration: none;
}

body{
	font-family: "微软雅黑";
	color: #14191e;
}

.main{
	width: 1200px;
	height: 460px;
	margin: 30px auto;
	position: relative;
	overflow: hidden;
}

.banner{
	width: 1200px;
	height: 460px;
	position: relative;
}

.banner-slide{
	width: 1200px;
	height: 460px;
	position: absolute;
	background-repeat: no-repeat;
	display: none;
}

.slide-active{
	display: block;
}

.slide1{
	background-image: url("../img/bg1.jpg");
}

.slide2{
	background-image: url("../img/bg2.jpg");
}

.slide3{
	background-image: url("../img/bg3.jpg");
}


.button{
	width: 40px;
	height: 80px;
	left: 244px;
	top: 50%;
	margin-top: -40px;
	position: absolute;
	/*为什么将background-image改为background后,图片才能显示？*/
	background-image: url("../img/arrow.png") no-repeat center center;
	background-color: rgba(128,128,128,0.3);
}

.button:hover{
	background-color: rgba(128,128,128,1.0);
}

.prev{
	transform: rotate(180deg);
}

.next{
	left: auto; 
	right: 0;
}

使用background-image: url()；不能显示图片，但为什么改为background: url()；后图片就能正常显示了？

好帮手慕柯南

2019-06-04

同学你好！检查一下图片的路径是否和老师的一样，如果不能够解决同学贴一下代码，以及项目的结构。祝学习愉快~

0 学习 · 9666 问题

查看课程

相似问题

为什么图片不显示啊

回答 2

为什么要把图片设置成背景？

回答 2

background-image和backgroun有什么区别

回答 1

麻烦老师帮忙看看，为什么图片不显示

回答 1

老师我这个图一为什么显示不出来a

回答 2

打开慕课网App查看更多内容