在Sass和CSS中的Instagram滤镜库：CSSgram
bger
9年前
简单地说，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库。
- 在你的项目中链接该库。
<link rel="stylesheet" href="css/vendor/cssgram.min.css"> - 在你的图片元素上添加滤镜名字的Classes（因为本库使用伪类选择符实现滤镜效果，所以滤镜类需要添加到容器元素上，不能是img，最好是figure标签）。
<figure class="aden"> <img src="../img.png"> </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"