许多人喜欢使用Instagram和应用程序附带 ，以使他们的照片更加有趣和美丽。 到目前为止，这些过滤器的使用仅限于在应用程序内部使用。 如果您想在应用程序外部的Web图像上使用Instagram过滤器 ，例如要放在个人博客或网站中的照片，该怎么办？

好吧，您可以使用 （一个小型​​库），该库使您可以使用类似于Instagram应用程序上找到的滤镜来编辑照片 。 与使用CSSGram进行手动编辑或通过Photoshop操作完成编辑的Photoshop不同，整个过程是通过CSS完成的。

这个怎么运作

为了生成效果，CSSGram利用CSS滤镜和CSS混合模式 ，基本上将效果混合到模仿您所需的Instagram滤镜的位置。 通过伪元素将效果应用于图像容器。 让我们看看如何通过“ 1977”示例完成此操作：

这是添加的伪元素。

._1977{		position: relative;	}	._1977:after{		content: '';		display: block;		height: 100%;		width: 100%;		top: 0;		left: 0;		position: absolute;	}

这是CSS过滤器和Blend添加的：

._1977 {		-webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3);		filter: contrast(1.1) brightness(1.1) saturate(1.3); 	}	._1977:after {		background: rgba(243, 106, 188, 0.3);		mix-blend-mode: screen; 	}

如何使用

我们不能将过滤器类直接添加到图像元素，必须将其添加到容器或父类中，例如使用<figure>作为容器。

该代码将如下所示：

不要忘记将CSSgram库（ 获取）包含到HTML文档中。

我在添加过滤器之前和之后创建了图像演示，结果非常好。 目前，库中包含13个过滤器。 在下面可以看到原始图像与“ 1977 ”，“ Aden ”和“ Gingham ”过滤器下图像的区别。

参见笔

如果您只想使用任何一种样式，则可以相应地加载 。

使用SCSS

如果要在不更改名称的情况下将滤镜添加到当前图像容器类中，则可以通过在SCSS文件中扩展滤镜效果来实现。 这是操作方法。

首先并导入您的SCSS文件。

@import 'vendor/cssgram';

假设您具有如下所示HTML结构：

然后在您的style.scss中，如下扩展过滤器：

.my-class {    ...    @extend %_1977;}

更多Instagram帖子

翻译自: