CSS Sprite，我們一般叫他雪碧圖或精靈圖，它是一種圖像拼合技術。該方法是將小圖標和背景圖像合並到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。
雪碧圖的使用有以下幾個優點
- 減少圖片的字節。
- 減少網頁的http請求，從而大大的提高頁面的性能。
- 解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。
- 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。
雪碧圖的合成可以在這進行拼合：https://www.toptal.com/developers/css/sprite-generator。至於用法我就不教了
語法：background-position:npx npx;
（第一個值是調左右的，當你需要將背景圖向右調的時候用正值， 向左則為負值 同理將背景圖上下調動的時候上是用負值，下是正值）
簡單上個小案例
雪碧圖
代碼：
<!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> .logo{ display: flex; flex-direction: row; flex-wrap: wrap; } .bg{ margin-left: 20px; width: 100px; height: 100px; background-image: url(css_sprites.png); } .logo1{ background-position: -25px -20px; } .logo2{ background-position: -466px -20px; } .logo3{ background-position: -466px -168px; } .logo4{ background-position: -914px -313px; } .logo5{ background-position: -616px -313px; } </style> </head> <body> <div class="logo"> <div class="bg logo1"></div> <div class="bg logo2"></div> <div class="bg logo3"></div> <div class="bg logo4"></div> <div class="bg logo5"></div> </div> </body> </html>
效果
樣式中flex若有不同，可看我《Flex布局學習 （一）》這篇筆記