html background-image 圖片打開失敗的原因

寫網頁的時候遇到一個問題，在樣式表裏面引用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>

 總結：注意圖片與文件的相對位置。