[精讚] [會員登入]
570

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

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

此文完整連結 http://n.sfs.tw/10398

複製連結 [CSS] 將多張圖片合併,製作css spirte@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2016-12-08 13:42:14 最後編修
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>

 

 

你可能感興趣的文章

讓radio box 或checkbox 好按 在行動裝置下,radio box及checkbox變得很難按得到

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

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

表格如何選取一欄(選取一直行) 表格中要指選擇一列很容易,直接叫用<tr>的標籤即可,但是要選取一欄呢?

[CSS] 改變文字選擇的顏色(反選的顏色) 我們會用滑鼠選取一小段文字,可能是為了複製或是為了看他清楚點,這篇來改變他選擇時的背影色。

CSS 垂直中文字 要把文字垂直顯示的處理中文字正轉或逆轉90度的css設定

[CSS] HTML 畫出粗外框表格的方法 (粗框表格) 在畫表格的時候,習慣上表格的外框要比內部的線條來得粗,不但比較美觀,而且看起來比較完整

[CSS] 背景 background css 中最常用的特性(property)之一就是 background ,這個有什麼好難的?事實上 backgroun

[HTML] CSS中的折字換行或不換行(防止容器破壞) 使用者留言時故意來用一串長長的且沒有任何空白的長字串,把你的容器破壞得很難看...

[CSS] 多個 class 的表示法和寫法 網頁設計中常會用到CSS,他的一般格式是這樣的:

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。請注意:留言不可帶有網址,會被濾掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

PHP for sphinx 函式庫安裝 PECL/sphinx PHP>= 5.2.2 已經能原生支援 sphinx,可是預設的沒有裝,我們得自己裝才能用

精讚的版面變化 ▓此文僅作為舊文的記錄▓ 這篇文章為了紀念改版完成而撰寫。 原本的部落格是民國97年的作品,那時還是用舊有的技術來寫,很

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

Sound of Music @比利時中央車站 比利時中央車站的快閃表演:「真善美」

[CKeditor4] 修改特殊字元 CKeditor4 中設定自己想用的特殊字元