首頁 >專題報導

網頁圖片特效CSS濾鏡包簡單用

作者：楊家榮 / 臺灣大學計算機及資訊網路中心程式組幹事

當網頁載入instagram.css濾鏡特效包，便可輕鬆即時套上各種色調的濾鏡特效，完全不需懂得如何操作與修改各類參數值，只需在您圖片上的CSS寫入您要的效果名稱即可達成。

過去您拍完相片上傳至臉書或部落格網站後，是否有時覺得相片似乎還少了一種感覺，不夠特別，不夠吸引人？有時想讓相片表現出歲月滄桑或其他情境的感覺，我們常會利用Photoshop或手機美圖APP等軟體工具來修圖。透過這類修圖工具慢慢調整色調、亮度、對比、曲線、飽和度等複雜參數，讓原本較為單調的相片變化出不同的風格與特色。

但並非每個人都知道怎樣調整修改才能調出好看的色調圖片，常常不斷耗時嘗試微調，卻一直調不出自己想要的感覺；而Instagram社群網站就有這種方便的應用程式功能，廣受大眾喜愛，能把您上傳的照片即時套用很有質感的風格濾鏡，讓您的照片與眾不同，大大提高朋友們的觀看率。

在GitHub網站中，有網友分享instagram.css濾鏡特效包，當網頁載入這支CSS濾鏡包，便可輕鬆即時套上各種色調的濾鏡特效，完全不需懂得如何操作與修改各類參數值，只需在您圖片上的CSS寫入您要的效果名稱即可達成。

Instagram.css濾鏡特效包
前往Instagram.css專案網頁：https://github.com/picturepan2/instagram.css。
進入專案網頁後，頁面上半部為該專案的維護與更新概況資訊（圖1），下半部為使用教學說明。

圖1：專案檔案更新概況

點選頁面上方的dist資料夾圖示，進入dist目錄內，可看到2支CSS檔案，選擇下載壓縮後的版本instagram.min.css，使用壓縮過後CSS的版本檔案，可節省網站流量並加快載入速度（圖2）。

圖2：Instagram.css主檔案

將這支instagram.min.css檔案插入您網頁HTML檔案中的<head>標籤區塊（圖3），其範例程式碼為：<link rel="stylesheet" href="css/instagram.min.css">。

圖3：載入instagram.css檔案

再把您的圖片插入HTML檔案結構的<body>區塊中（圖4），範例程式碼為：<img src="img/sample.jpg">。

圖4：載入圖片

在圖片程式碼外圍用另一個特殊標籤<figure>包圍住圖片程式碼（圖5），其範例程式碼為：<figure class="filter-[濾鏡名稱]"> <img src="img/sample.jpg"></figure>；再將您想使用的濾鏡特效名稱填入該特殊標籤中的[濾鏡名稱]，即可馬上套用濾鏡效果。

圖5：套用濾鏡特效