關於css雪碧圖sprite

天氣轉涼了，又開始貪戀暖暖的被窩了。

早上不想起牀的時候在被窩裏看了有關於雪碧圖的視頻。

 

1.使用場景

　　V導航條，登陸框img標籤屢次載入，性能低

　　X大圖banner按需加載，若是作成雪碧圖一次加載就會載入比較久

　　X純色背景的按鈕

　　X動態圖片

　　總結：1.靜態圖片，不隨用戶信息變化而改變

　　　　　2.小圖片，3-5k

　　　　　3.加載量比較大

　　優勢：有效減小http的請求數量，加速內容顯示

　　缺點：1.內存缺陷；2.頁面縮放有暴露風險；3.對爬蟲不友好

 

2.實現原理

　　同一張背景圖，改變background-position，調整x軸和y軸從而改變背景圖可視的區域

　　

　　如圖，須要顯示裙子時background-position:0 0;  顯示高跟鞋時background-position:0 -24px;  顯示窗簾時background-position:-41px 0;

　　注意：單位，座標爲負值。　　　

 

3.實現方式

　　ps手動拼圖，量少小網站

　　雪碧圖生成工具，有在線生成

 

一邊看視頻一邊敲代碼練習，老是能夠把標註30min的視頻延長至2hour

多是坐姿有問題，經常肩膀疼背疼，過久ps的時候也會這樣

恩，雖然不餓，可是是時候下樓吃個飯了，下午繼續