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

2410

“

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

„

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

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

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

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

這裡操作介面直覺，只要把圖檔從桌面拉上去即可，但是缺點是效能不佳，速度慢，如果檔案數很多(例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

UTF-8 BOM (Byte Order Mark) 的問題在 Michael Kaplan 那看到 Every character has a story #4: U+feff

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

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

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

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

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

[Windows7] 移除IE10及移除IE11 Windows7 不得已的情況要移除IE11或IE10怎麼做？

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

[CodeIgniter 3] 資料庫的使用方法整理2/2 CI3 承襲 CI2，有很多的builder class可以用，依各人的使用習慣，有人喜歡一堆sql字串，有人喜歡用helper

維修海棉拖把頭這類型的海棉拖把很好用，可是這近發現海棉頭越來越不耐用，也許是錯覺，以往都能用個三四個月，現在二個月就差不多掉下來。這