css前端背景图片不显示,background-image无效,路径正确但背景图片不显示问题

小猪跑不快 2024-10-25 09:03:01 阅读 93

记录一次调试前端页面时设置背景图片不生效问题:

一、路径问题:

        老规矩根据网上资料检查路径是否正确,相对路径绝对路径都试过均不生效

<code><div class="container" style="background-image: url(./img/bg.png)">code>

</div>

.container{

width: 100%;

height: 100%;

}

二、高度问题:

        后面又想到如果div盒子没有高度,背景图片是显示不出来的,虽然设置了高度100%,但是如果内部没有元素撑开依然没有效果,所以把高度宽度都加上

.container{

width: 100px;

height: 100px;

}

        结果发现还是没有效果,依然显示不出来,有点头疼了

三、最终解决:

        后面想到是不是路径解析不对,如果把属性放在style中是不是更好

<div class="container">code>

</div>

.container{

width: 100px;

height: 100px;

background-image: url(./img/bg.png)

}

问题完美解决,背景图片正常显示了,但是不知道具体原理,记录下来希望有大佬解惑



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。