如何使用纯 CSS 在浏览器中应用 Instagram 过滤器

欢迎来到另一个 Envato Tuts+ 快速提示；在今天的视频中，我们将讨论 Instagram 过滤器。如果您是 Instagram 用户（可能即使您不是），您会知道它为您提供了各种不同的过滤器，您可以将这些过滤器应用于您正在上传的照片。如今，您可以在浏览器中使用 css 实现类似的结果。让我们来看看！

截屏

Instagram.css

Instagram.css是一个库，可以在 Github 上找到，它可以为您完成所有繁重的工作。下载它，然后将其添加到您的网页（或作为拉入CodePen 笔的资产）。 

我们的标记看起来有点像这样：

<div class="demo-container">  <figure>    <img src="boat.jpg">  </figure></div>

我们有一个demo-container纯粹用于将图像定位在中心的位置。<img>标签被包裹在一个中<figure>，<figure>我们将为此添加一些类。 

添加一个filter-类

目前有超过 40 个过滤器可用，都列在 Github 页面上。以下是您可以在下面的嵌入式笔中尝试的一两个示例：

• 1977年 filter-1977

• 海伦娜 filter-helena

• 开尔文 filter-kelvin

• 月亮 filter-moon

• Poprocket filter-poprocket

• 雷耶斯 filter-reyes

• 塞拉利昂 filter-sierra

• 烤面包机 filter-toaster

• 瓦伦西亚 filter-valencia

• 瓦尔登湖 filter-walden

See the Pen  How to Use Instagram.css: base by Envato Tuts+ (@tutsplus)  on CodePen.

它是如何工作的？

如果你打开未缩小版的 instagram.css，你会看到每个类都应用了 CSSfilter 属性，例如：

.filter-1977 {  filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);}

其他人更进一步，将混合模式添加到位于图像上方的伪元素：

.filter-amaro::before {  background: rgba(125, 105, 24, .2);  content: "";  mix-blend-mode: overlay;}

应用于filter和mix-blend-mode改变图像的通道、饱和度和亮度的值，结合起来为我们提供了类似 Instagram 的效果。这些也是非常强大的效果，以前只能在带有 svg 的浏览器中使用。 

浏览器支持

现代浏览器对 CSS 过滤器的支持相当不错，包括最新版本的 Edge (13+)。IE 不提供支持，IE Mobile 也不提供支持。查看CanIUse了解更多详情。

结论

这就是这个快速提示的内容；instagram.css 提供了一种非常快速的方法，可以在浏览器中为您的图像应用一些很酷的效果。去下载它，玩它，然后把它拆开来应用你自己的过滤器和效果。