轮播中图片显示不出来

轮播中图片显示不出来

<!DOCTYPE html>
<html>
<head>
    <title>综合实例</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
</head>
<body>
    <div class="main">
        <!--图片轮播-->
        <div class="banner">
            <a href="">
                <div class="bannner-slide slide1"></div>
            </a>
            <a href="">
                <div class="bannner-slide slide2">
                </div>
            </a>
            <a href="">
                <div class="bannner-slide slide3">
                </div>
            </a>
        </div>
    </div>
</body>
</html>
-----------------------css------------------------
*{
    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;
    background-color: #fcc;
    overflow:hidden;
    position:relative;

}
.banner-slide{
    width: 1200px;
    height: 460px;
    position: absolute;
    background-repeat: no-repeat;
}
.slide1{
    background-image:url("../img/bg1.jpg");
}
.banner-slide img{
    width: 1200px;
    height: 460px;
}


地址正确,为什么显示不出来

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
小丸子爱吃菜 2017-12-22 19:03:11

以当前的代码来看,要给下面的元素设置宽和高,图片路径根据你的测试中图片存放的位置来写

 .slide1 {

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

         width: 1200px;

        height: 460px;

    }


小丸子爱吃菜 2017-12-22 18:02:50

给引入背景图片的元素直接设置宽和高就可以了啊

  • I编程 #1
    在哪里加
    2017-12-22 18:34:06
  • I编程 #2
    我把这个代码截图给别的人看,会不会追究我的责任
    2017-12-22 18:44:51
小丸子爱吃菜 2017-11-07 14:24:36

因为引入的是背景图片,所以要给引入背景图片的区域设置宽和高!不然他是没有宽和高的,所以显示不出来。

祝学习愉快!

  • I编程 #1
    如何设置区域的高和宽
    2017-12-22 17:49:45
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师