css在图片上加图片不显示不出来

最近我在做一个网站的时候遇到了一个奇怪的问题，就是在用CSS加图片的时候，加进去的图片却不显示不出来。经过一番探究，我发现了问题所在，并解决了它。下面我将分享一下我的解决方案。

.container {
    background-image: url("bg.jpg");
    background-repeat: no-repeat;
    width: 800px;
    height: 600px;
    position: relative;
}
.icon {
    background-image: url("icon.png");
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

以上是我加图片的CSS代码。我们可以看到，我在一个大小为800px * 600px的容器中加入了一个大小为100px * 100px的图标。但是，当我刷新页面时，图标却不显示。

这是因为我的项目结构是：

--index.html|--css|  |--style.css|--images|--bg.jpg|--icon.png

当我在CSS中引入图片时，应该使用相对路径。但是，我在CSS中使用的是相对于CSS文件的路径，而不是相对于HTML文件的路径。因此，加入背景图却没有问题，加入图标却没有显示。

解决方法很简单，只要修改CSS中引入图片的路径，使它相对于HTML文件的路径即可：

.container {
    background-image: url("../images/bg.jpg");
    background-repeat: no-repeat;
    width: 800px;
    height: 600px;
    position: relative;
}
.icon {
    background-image: url("../images/icon.png");
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
    

以上是修复后的CSS代码，我们可以看到，现在我们引入图片的路径是相对于HTML文件的路径。这样一来，我们的图标就能成功显示了。

总之，当我们遇到图片不显示的问题时，首先要检查我们引入图片的路径。是否是相对于HTML文件的路径。只有确保路径正确，我们的图片才能正常显示。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！