前端的background填充背景色時，使用內聯樣式style與class的區別

最近有項目需要上線，結果上線服務器的配置存在問題，前端需要圖片居然是以text/html格式請求的，當然這個跟我們前端沒啥關係了。但是吧，我當時發現只有部分圖片沒有顯示(因爲沒有請求到)，還有一部分圖片是正常顯示的。當時立馬打開F12進行查看請求，發現只有部分圖片是直接請求的，還有一部分圖片在F12裏面是看不到請求的。
懷着求真的思想，發現這兩塊代碼的區別，有問題的是寫在內斂樣式style，一個是寫在class裏面獲取的。(ps因爲這個項目是由多人維護的)
立刻做了下實驗(當時也想了下可以通過img獲取圖片，也加入了測試)

<div>
   <img src="../../static/openImg.png" style="height:30px;width:30px;"/>
   <i class="openClass"></i>
   <i style="background: url('../../static/openStyle.png') no-repeat;display:inline-block;height:30px;width:30px;"></i>
</div>
<style>
.openClass{
    background: url('../../static/openClass.png') no-repeat;
    width:30px;
    height: 30px;
    display:inline-block;
}
</style>

chrome上的請求

IE上的請求

火狐

對於chrome上面多了一個data:image/png;base…的請求，這就是chrome厲害的地方，它自動把存放的圖片轉換成了base64位格式，避免在資源中存放圖片。