[精讚] [會員登入]
2048

[CSS] 將多張圖片合併,製作css spirte

網站中有很多的小圖,如果能把他們合併後再用CSS取用,就能大幅的提升網路效能。

分享此文連結 //n.sfs.tw/10398

分享連結 [CSS] 將多張圖片合併,製作css spirte@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-25 04:16:29 最後編修
2016-12-08 13:27:27 By 張○○
 

自動目錄

網站中有很多的小圖,如果能把他們合併後再用CSS取用,就能大幅的提升網路效能,這個方法叫作「css spirte」

這兩個網站在線上就能幫忙把小圖合併,同時也會產生相對應的CSS碼,從此你就不必再辛苦的自己製作CSS 了。

網站

http://css.spritegen.com/

這裡可以一次上傳png圖檔最多可達2000張,輸出可為PNG/JPG/GIF,如果圖檔有錯誤,他還會顯示錯誤訊息 。

它也提供響應式設計的輸出,差異在於CSS的值都採用百分比。此網站效能相當好,246個檔案大概只花3秒就完成。

http://spritegen.website-performance.org/

這裡操作介面直覺,只要把圖檔從桌面拉上去即可,但是缺點是效能不佳,速度慢,如果檔案數很多(例n>100),就要花很多的時間等待。此外如果傳入的檔案有問題,他也不會提示錯誤,就整個停在那裡,讓人不知所措。

使用方式

製作完的圖檔,可以使用網站上的範例來上圖,只要在你的網頁上有引入這個CSS及圖檔,就能看到正確的結果。

CSS 修改圖檔位置

{ display: inline-block; background: url('/path/to/你的圖檔.png')...

HTML 置入css及tag

<head>
  <link rel="stylesheet" href="/path/to/your.css">
</head>
<body>
...
<i class="flag flag-wf"></i>

 

 

END

你可能感興趣的文章

[CSS] 將多張圖片合併,製作css spirte 網站中有很多的小圖,如果能把他們合併後再用CSS取用,就能大幅的提升網路效能。

[CSS] placeholder 屬性的CSS怎麼設定? 常會用到的placeholder可以在沒填值時有提示的文字,想要改變格式該怎麼做?

[HTML] 讓表格整欄上色的方法 過去我們要讓表格整欄上色,都得用很不方便的方法:該儲存格設定一個類別,指定他的樣式,現在有更好的方法

產生模糊的文字 有時我們需要產生模糊的文字,類似毛玻璃看到的效果。

網頁的標頭(head)搜尋引擎和FB最佳化 網頁的標頭(head)搜尋引擎和facebook最佳化

textarea計算字數和行數 textarea可以大量的放入文字,但要如何計算字數和行數呢?

隨機好文

UTF8中文字/全形一覽 快速查詢urf-8的中文字,共計13246中文字(5401常用字+7652罕用字+日文或編號),292全形符號,27半形符號。

問問題 問問題其實內涵很深,我悟了很久才懂。 有人問題的目的並不一定是想要得到答案,有時只是純粹想問問題..

海棉寶寶超泡杯演奏的sweet victory 章魚哥和海棉寶寶在超泡杯的演奏歌曲

[Bootstrap] Datepicker使用/Bootstrap日期選日期選擇器的使用 Bootstrap日期選日期選擇器的使用

[MAC] 好用的傳檔程式Commander One(可用FTP、SFTP等協定) MAC上好用的傳檔程式,免費而且支援FTP、SFTP、Dropbox、Onedrive、GoogleDrive、WebDAV等協定