写网页的时候遇到一个问题, 在样式表里面引用 background-image, 没有出现效果. 查了一下是提取图片的路径不对, 记录下遇到问题以及解决方法.
1, 系统自带 url 引号问题
这个最坑, 以为系统就是 god, 结果神打盹了.
系统自带 url 使用双引号:<div style="height: 213px;width: 150px;background-image: url("../Picture/a4.jpg")"></div>
系统自带 url 使用单引号:<div style="height: 213px;width: 150px;background-image: url('../Picture/a4.jpg');"></div>
这个问题是我在 Mac 版 Pycharm 上编写时遇到的, 不确定在其他设备上是否存在.
2, 图片与不在同一个目录
所有图片都放在 Picture 目录, 所有 h5 文件都放在 Thirteen 目录, Picture 目录和 Thirteen 目录的父目录为 PythonStudy.
成功方法: 使用相对路径:<div style="height: 213px;width: 150px;background-image: url('../Picture/a4.jpg');"></div>
失败方法: 使用绝对路径:<div style="height: 213px;width: 150px;background-image: url('/PythonStudy/Picture/a4.jpg');"></div>
3, 图片目录与 h5 文件在同一个父目录
失败的方法 1: 不会报错, 但是找不到图片:<div style="height: 213px;width: 150px;background-image: url('/Picture/a4.jpg');"></div>
失败的方法 2: 注意 html 文件的位置:<div style="height: 213px;width: 150px;background-image: url('../a4.jpg');"></div>
失败的方法: 不会报错, 但是找不到图片:<div style="height: 213px;width: 150px;background-image: url('Picture/a4.jpg');"></div>
总结: 注意图片与文件的相对位置.
来源: https://www.cnblogs.com/z977690557/p/11956918.html