一、定義：
CSS Sprite也叫CSS精靈，CSS雪碧圖，是一種網頁圖片應用處理方式，它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，由從前的多次請求變為一次請求，客戶端每顯示一圖片都會向服務器發送請求，所以圖片越多請求越多，造成延遲的可能性越大，所以頁面有許多icon時，推薦使用CSS Sprite，
二、優點：
（1）減少圖片的位元組，
（2）減少網頁的http請求，從而大大的提高頁面的性能，
（3）解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率，
三、原理：
（1）需要一個設定好寬和高的容器
（2）通過background-image引入背景圖片
（3）通過background-position把背景圖片移動到自己需要的位置
除錯方法:可以用瀏覽器自帶的除錯工具進行除錯（如chrome瀏覽器按f12即可進行除錯，慢慢移動background-position的值來達到理想的效果）
*默認顯示在左上角，當只取一個值時，第二個值默認center
四、PS使用cutterman制作雪碧圖的步驟：
1.打開圖片（psd格式）：檔案-打開——>Ctrl+o——>拖拽
2.點擊移動工具（自動選擇圖層）
3.按住Ctrl選中制作雪碧圖的圖層
4.點擊視窗-擴展功能
五、PS制作背景透明：
1.魔棒工具選中背景
2.delate洗掉背景顏色
3.洗掉不完美再次用選框工具選中
4.delate洗掉背景顏色
六、PS選中目標圖案：
1.物件選擇工具
2.魔棒工具選中背景區域，Ctrl+shift+i 反選
3.復制圖層，Ctrl+j
七、去水印：
1.仿制圖章工具
2.按住alt吸取顏色
3.涂改水印
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/258656.html
標籤：其他