[CSS] 將多張圖片合併，製作css spirte @新精讚

[無邊框]

1794

[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

你可能感興趣的文章

[HTLM5] 表單時間日期date/time輸入類型介紹HTML5和時間有關的輸入類型date/datetime/datetime-local/month/time/week

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

關閉瀏覽器表單的自動完成autocomplete 什麼是自動完成？就是當我們在網頁的輸入文字欄位中打入文字時，瀏覽器會把曾輸入過歷史記錄中找出來讓我們選擇。

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

網頁自動轉址的四種方法設定網頁自動轉址的四種方法，三種html，一種php

[HTML5] script 的新增屬性 defer, async script 的新增屬性 defer, async

我有話要說

訪客留言

[無留言]

隨機好文

SELinux 常用指令和檔案在Redhat系列中，Centos5以後加入了selinux，他並沒有這麼可怕，不必每次看到Selinux ，就想把他

[Freebsd] 定時測試 ADSL 是否斷線並重連中華電信 ADSL 雖有固定 ip，可是他卻會不定時「斷線」, 使用以下的方法可以定時測試是否斷線，以及重新撥接。

[PHP] 檢查檔案是否是圖檔使用getimagesize函數檢查檔案是否是圖檔

「許功蓋」的字以及源由有玩過電腦一段時間的人，都聽過這個人(有一天我才發現7年級的竟然都不認識這個

[MYSQL] 設定字串欄位的預設值新增表格的時候，字串欄位給予預設空值；數字欄位給預設數值；日期欄位給空值。

網站
使用方式

到最底端