CSS精灵图（sprite）
生活随笔
收集整理的這篇文章主要介紹了
CSS精灵图（sprite）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ?說到精靈圖（雪碧圖），大家肯定和我一樣覺得這個很新鮮。在學習了有關精靈圖（雪碧圖）的一些知識后，就來和大家討論一下，我個人對精靈圖（雪碧圖）的一些理解和實現方法吧。
1、精靈圖技術產生的目的：很多大型網頁在首次加載的時候都需要加載很多的小圖片，而考慮到在同一時間，服務器擁堵的情況下，為了解決這一問題，采用了精靈圖這一技術來緩解加載時間過長從而影響用戶體驗的這個問題。
2、精靈圖技術的本質：所謂精靈圖就是把很多的小圖片合并到一張較大的圖片里，所以在首次加載頁面的時候，就不用加載過多的小圖片，只需要加載出來將小圖片合并起來的那一張大圖片也就是精靈圖即可，這樣在一定程度上減少了頁面的加載速度，也一定程度上緩解了服務器的壓力。例如王者榮耀頁面里的幾個小logo:
3、那么這是怎么實現將這么一張復雜的圖片分別展示出來的呢，這里就得運用到了background-position。我們通過它來改變背景圖片的位置，從而顯示出我們想要顯示出來的部分。
例如這是一張大的精靈圖，我們現在用它來拼出我們想要的字母，例如ANDY
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{display: inline-block;background: url(images/abcd.jpg) no-repeat;}.aa{width: 108px;height: 110px;background-position: 0 -9px;}.nn{width: 112px;height: 110px;background-position: -255px -276px;}.dd{width: 97px;height: 107px;background-position: -363px -8px;}.yy{width: 110px;height: 110px;background-position: -367px -556px;}</style> </head> <body><div class="aa"></div><div class="nn"></div><div class="dd"></div><div class="yy"></div> </body> </html>最終效果：
?
其實說白了就是將精靈圖設為一個大背景，然后通過background-position來移動背景圖，從而顯示出我們想要顯示出來的部分。
精靈圖雖然實現了緩解服務器壓力以及用戶體驗等問題，但還是有一個很大的不足，那就是牽一發而動全身。這些圖片的背景都是我們詳細測量而得出來的，如果需要改動頁面，將會是很麻煩的一項工作。。。
總結
以上是生活随笔為你收集整理的CSS精灵图（sprite）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux 笔记本合盖不休眠设置
- 下一篇： surface pro java_微软新