在Sass和CSS中的Instagram滤镜库：CSSgram_html/css_WEB-ITnose

简单地说，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

下载CSSgram库。

在你的项目中链接该库。

在你的图片元素上添加滤镜名字的Classes（因为本库使用伪类选择符实现滤镜效果，所以滤镜类需要添加到容器元素上，不能是img，最好是figure标签）。

<figure class="aden"> <img  src="/static/imghw/default1.png"  data-src="../img.png"  class="lazy" alt="在Sass和CSS中的Instagram滤镜库：CSSgram_html/css_WEB-ITnose" > </figure>

可用的滤镜类
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.open-open.com/lib/view/home/1446038847710