以前網頁需要一堆 Icon、Logo、甚至是美美的邊框圖片等等,需要設計很多圖檔,然後在網頁中一一使用 img 標籤來載入圖檔。 現在您可以把這一大堆 Icon、Logo圖檔,全部存成一張圖,再利用 CSS background image 來設定哪個標籤需要圖檔中的哪一個部份。 這樣的好處是,大量減少 http request 而且可以很容易的用程式去控制要去讀哪個區塊的圖片 CSS Sprite Generator http://spritepad.wearekiss.com/ https://www.image-maps.com/ http://spritepad.wearekiss.com/ http://www.spritecow.com/ http://spritegen.website-performance.org/ Border Image Generator https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-image_generator http://border-image.com/#%7B%22src%22%3A%22http%3A%2F%2Fwww.w3.org%2FTR%2Fcss3-background%2Fborder.png%22%2C%22linkBorder%22%3Atrue%2C%22borderWidth%22%3A%5B0%2C0%2C0%2C0%5D%2C%22imageOffset%22%3A%5B27%2C27%2C27%2C27%5D%2C%22fill%22%3Atrue%2C%22setRepat%22%3Afalse%2C%22repeat%22%3A%5B%22repeat%22%2C%22repeat%22%5D%2C%22scaleFactor%22%3A3%2C%22setRepeat%22%3Atrue%7D...