什么時候精靈圖呢？
通常在渲染頁面的時候，需要服務器向我們發送資料，但有的時候一個頁面需要多張圖時，服務器就會處于連續發圖的作業狀態，但如果我們把需要的圖都放在一張圖上，這樣可以大大的減少服務的作業負擔，打個比喻，服務器發一張圖是，作業流程是：找到圖片——讀取圖片——發送圖片，如果是發送5個圖片時，那么服務器就需要重復執行五遍這個操作，但是每次服務器在執行IO操作時，都會占用服務器的記憶體和處理器性能，而如果是只發送一張圖片的話，盡管圖片會大，但是她只占用一次記憶體和處理器性能，更多的占用網路資源，但一張圖能有多大呢？
同時在渲染時，也不用等那五個圖片都發送過來，又要執行五次接受——讀取——渲染的作業的，這對前端渲染頁面時也是有好處的，提高了頁面加載速度（總結：減輕服務器作業負擔，減少服務器發送次數，提高頁面加載速度）
怎么使用？
首先我們需要一個行內標簽（span等，注意行內標簽的高寬是不起作用的）來存放圖片，注意這個容器的大小要和我們需要的小圖尺寸是一樣的，
將精靈圖設定為背景圖片（如果是img，整個都會露出來），
測量小圖在大圖中的位置，使用background-position：x，y背景屬性來實作位置的移動，分別取負數設定給盒子的background-position：x y，x是水平位置，y是垂直位置，
設定背景圖片大小（background-size），這個應該放在背景那里展示，以后移動
通常在開發中背景圖片的大小并不是和盒子一米一樣大，這時需要開發人員進行手動設定，
屬性名：background-size
屬性值：水平、垂直
文字陰影（text-shadow）
給文字添加陰影
屬性名：text-shadow
盒子陰影（box-shadow）
給盒子添加陰影
屬性名：box-shadow
屬性值：
過渡（transition）
可以讓過渡效果變慢，比如旋轉，位移等等，需要在使用的標簽上設定這個屬性，如果是需要這個標簽的某個屬性變化的時候，就給屬性設定引數，然后再加整個程序的時候，
屬性名：transition
從一個小白開始做起，努力做一個美國總統
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500827.html
標籤：其他
上一篇：前端DAY01-HTML
下一篇：前端構建效率優化之路