背景图片不显示是路径错了吗？

懒猫12138 2020-10-31

源自：项目：JavaScript轮播图 2-1 轮播图样式（1）

收起

2回答

好帮手慕美回答被采纳获得+3积分 2020-11-02 11:04:23

同学，你好，

1、同学看下css文件是否保存

2、同学将所有的banner图片所在的div的display属性设置为了none，该元素不会显示，因此背景图片显示不出来

参考代码：

<div class="main">
    <!--图片轮播-->
    <div class="banner">
        <a href="">
            <div class="banner-slide slide1 slide-active"></div>
        </a>
        <a href="">
             <div class="banner-slide slide2 slide-active"></div>
        </a>
        <a href="">
             <div class="banner-slide slide3 slide-active"></div>
        </a>
 </div>

*{
    margin: 0;
    padding:0;
}

ul{
    list-style: none;
}

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

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

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

.banner-slide{
    width: 1200px;
    height: 460px;
    background-repeat: no-repeat;
    float: left;
}

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

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

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

收起回答

好帮手慕燕燕 2020-10-31 14:22:33

同学你好，从项目结构上看图片路径没有问题，可检查下css样式，图片相关的div有没有设置宽度、高度属性，参考下面的代码

加油，祝学习愉快~~~

收起回答

提问者懒猫12138 #1

*{ margin: 0; padding:0; } ul{ list-style: none; } body{ font-family:"微软雅黑"； color:#14191e; } .main{ width: 1200px; height: 460px; margin: 30px auto; overflow: hidden; } .banner{ width: 1200px; height: 460px; overflow: hidden; position: relative; } .banner-slide{ width: 1200px; height: 460px; background-repeat: no-repeat; float: left; display: none; } .slide1{ background-image: url("../img/bg1.jpg"); } .slide2{ background-image: url("../img/bg2.jpg"); } .slide3{ background-image: url("../img/bg3.jpg"); } 还是不显示

2020-10-31 15:23:23
好帮手慕燕燕回复提问者懒猫12138 #2

同学你好，同学图片div可再添加一个类属性，class="banner-slide slide1 slide-active"，并为其设置.slide-active {display:block;}，直接给.banner-slide设置display: none;属性，图片是不会显示出来的加油，祝学习愉快~

2020-10-31 15:48:36
提问者懒猫12138 回复好帮手慕燕燕 #3

还是不显示...... *{ margin: 0; padding:0; } ul{ list-style: none; } body{ font-family:"微软雅黑"； color:#14191e; } .main{ width: 1200px; height: 460px; margin: 30px auto; overflow: hidden; } .banner{ width: 1200px; height: 460px; overflow: hidden; position: relative; } .banner-slide{ width: 1200px; height: 460px; background-repeat: no-repeat; float: left; } .slide1{ background-image: url("../img/bg1.jpg"); } .slide2{ background-image: url("../img/bg2.jpg"); } .slide3{ background-image: url("../img/bg3.jpg"); } .slide-active{ display: none; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <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 slide-active"></div> </a> <a href=""> <div class="banner-slide slide3 slide-active"></div> </a> </div> </div> </body> </html>

2020-11-02 10:21:52