background:url() 背景图不显示

2022-10-21 08:01:29

奇怪的问题：

.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");

}

码农公寓

相关文章