background:url() 背景图不显示

奇怪的问题:

.box-3 {
    width: 100%;
    height: 500px;
    border: solid 2px red;
    margin-top: 70px;
    padding: 0 0 0 800px;
    box-sizing: border-box;

    background: url("img/aike.jpg");
}

  居然不能显示出背景图片,路经似乎是正常的

问题原因:
  在url(imagepath)里的这个imagepath(图片路径)。这个url寻址位置是以css文件夹为root目录,也就是导入css的上一级目录

  通过浏览器调试,可以发现从css下面的img来找图片,但是img和css是平级的文件夹,就是说css下面是没有img这个文件夹存在的,所以浏览器当然报错了,因为根本找不到

那,解决办法?

  让其向上找一级,在让他找到img目录 ,在图片路径上加上 ../ 让其以上一级目录为root目录

.box-3 {
    width: 100%;
    height: 500px;
    border: solid 2px red;
    margin-top: 70px;
    padding: 0 0 0 800px;
    box-sizing: border-box;

    background: url("../img/aike.jpg");
}

  

 

posted @ 2017-09-06 08:12  梦_鱼  阅读(803)  评论(0编辑  收藏  举报