在Sass和CSS中的Instagram濾鏡庫：CSSgram

簡單地說，CSSgram是一個庫能夠直接在CSS中利用類似Instagram的濾鏡來編輯您的照片。通過在圖片上疊加顏色或漸變模擬實現濾鏡，可以節省大量的圖片處理時間，增加線上“玩弄”圖片的樂趣。

1. 兼容性

本庫主要基于 CSS Filters和 CSS Blend Modes，瀏覽器兼容性也主要依賴于這兩個特性。
Google Chrome: 43+
Mozilla Firefox: 38+
Opera: 32+
Safari: 8+
Internet Explorer: Nope
更多兼容性信息參見Can I Use。

2.使用

有兩種主要的方式使用該庫，使用CSS Classes和使用SASS @extends。

3.1 使用CSS Classes

1. 下載CSSgram庫。
2. 在你的項目中鏈接該庫。
   <link rel="stylesheet" href="css/vendor/cssgram.min.css">
3. 在你的圖片元素上添加濾鏡名字的Classes（因為本庫使用偽類選擇符實現濾鏡效果，所以濾鏡類需要添加到容器元素上，不能是img，最好是figure標簽）。

<figure class="aden"> <img src="../img.png"> </figure>

1. 可用的濾鏡類
   CSSgram提供的濾鏡類有：
   Aden:class="aden"
   Reyes:class="reyes"
   Perpetua:class="perpetua"
   Inkwell:class="inkwell"
   Toaster:class="toaster"
   Walden:class="walden"
   Hudson:class="hudson"
   Gingham:class="gingham"
   Mayfair:class="mayfair"
   Lo-fi:class="lofi"
   X-Pro II:class="xpro2"
   1977:class="_1977"
   Brooklyn:class="brooklyn"

項目主頁：http://www.baiduhome.net/lib/view/home/1446038847710