CSS實現(xiàn)精靈圖與字體圖標

2024-07-11 08:31:48

字體：大中小

來源：轉載

供稿：網友

精靈圖：

在以前，每個圖片資源都是獨立的一張張圖片，瀏覽器訪問網站中的不同網頁時是重復獲取這一張張圖片的，這代表需要訪問很多次資源。

為了減少資源的訪問次數，將多個常用的圖片集合到一張圖片中（網頁的緩存機制是會略去本地已經有的資源，如果前一次獲取到了這個資源，那么后面不會再訪問了，直到緩存的資源失效了。【意思有點類似去游樂園，有些票能玩所有游戲，而有些票只能玩一個游戲，如果你拿著能玩所有游戲的票，那你就不用麻煩去一次次買票了】）。

將多個常用的圖片集合到一張圖片中之后，把這個圖設置成背景圖片，然后利用background-position來顯示圖片的不同部分。

示例：

下面是一張26字母表，我們利用這張圖來拼出一個GOOGLE

<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Document</title> <style> div{ display:inline-block; } div:first-child{ width:79px; height: 79px; background-image:url('abcd.jpg'); background-position:-396px 0; } div:nth-child(2){ width:82px; height: 82px; background-image:url('abcd.jpg'); background-position:-326px -98px; } div:nth-child(3){ width:82px; height: 82px; background-image:url('abcd.jpg'); background-position:-326px -98px; } div:nth-child(4){ width:79px; height: 79px; background-image:url('abcd.jpg'); background-position:-396px 0; } div:nth-child(5){ width:48px; height: 77px; background-image:url('abcd.jpg'); background-position:-81px -101px; } div:nth-child(6){ width:48px; height: 77px; background-image:url('abcd.jpg'); background-position:-286px 0; } </style></head><body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></body></html>

結果: