寫網頁的時候遇到一個問題,在樣式表裏面引用background-image,沒有出現效果。查了一下是提取圖片的路徑不對,記錄下遇到問題以及解決方法。html
一、系統自帶url 引號問題url
這個最坑,覺得系統就是god,結果神打盹了。spa
系統自帶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>htm
這個問題是我在Mac版Pycharm上編寫時遇到的,不肯定在其餘設備上是否存在。blog
二、圖片與不在同一個目錄圖片
全部圖片都放在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> im
三、圖片目錄與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>
總結:注意圖片與文件的相對位置。