加速器instagram_如何在网络图像上应用Instagram过滤器

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

好吧，您可以使用CSSGram （一个小型​​库），该库使您可以使用类似于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>作为容器。

该代码将如下所示：

<figure class="_1977">
    <img src="images.jpg">
</figure>

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

<link rel="stylesheet" href="path/to/cssgram.css">

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

参见笔rOKPmW

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

使用SCSS

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

首先下载SCSS源文件并导入您的SCSS文件。

@import 'vendor/cssgram';

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

<div class="my-class">
    <img src="images.jpg">
</div>

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

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

更多Instagram帖子

• 40个工具和应用程序，可为您的Instagram帐户增值
• 你应该知道的10个有用的Instagram提示和技巧

翻译自: https://www.hongkiat.com/blog/instagram-filters-on-web-images/