老师 按钮显示不出来箭头
来源：2-4 轮播图上圆点按钮
SomnusL
2020-03-11 05:44:23
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
body{
color: #14191e;
}
.main{
width: 1200px;
height: 460px;
margin:30px auto;
overflow: hidden;
position: relative;
}
.banner{
width: 1200px;
height: 460px;
overflow: hidden;
position: relative;
}
.banner-slide{
width: 1200px;
height: 460px;
position: absolute;
background-repeat: no-repeat;
display: none;
}
.slide1{
background-image: url("../img/bg1.jpg");
}
.slide2{
background-image: url("../img/bg2.jpg");
}
.slide3{
background-image: url("../img/bg3.jpg");
}
.slide-active{
display: block;
}
.button{
position: absolute;
width: 40px;
height: 80px;
left: 244px;
top: 50%;
margin-top: -40px;
background-image: url("../img/arrow.png") no-repeat center center;
}
.prev{
transform: rotate(180deg);
}
.next{
left: auto;
right: 0;
}
.button:hover{
background-color: #333;
opacity: 0.8;
}
.dots{
position: absolute;
right: 20px;
bottom: 25px;
text-align: right;
}
.dots span{
display: inline-block;
width: 12px;
height: 12px;
line-height: 19px;
border-radius: 50%;
background-color:rgba(7,17,27,0.4);
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
margin-left: 5px;
cursor: pointer;
}
.dots span.active{
box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.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>
<a href="javascript:void(0)" class="button"></a>
<!-- 圆点 -->
<div class="dots">
<span class="active"></span>
<span class="active2"></span>
<span class="active3"></span>
</div>
</div>
</body>
</html>
导进去是没问题的能看见，设置了no-repeat center center这几个就消失了
1回答
-
同学你好，background-image属性是引入图片，无法设置 no-repeat，建议同学修改为background。代码如下所示：
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0
相似问题