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

暗淡冬天 2019-06-04

源自：项目：JavaScript轮播图 2-3 轮播图上按钮样式

收起

3回答

好帮手慕柯南回答被采纳获得+3积分 2019-06-04 16:59:11

同学你好！

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

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

收起回答

提问者暗淡冬天 2019-06-04 16:25:02

<!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;
}